How many types of layouts are there in Bootstrap ?
Containers are the most basic layout element in Bootstrap and they are needed while using the default grid system. There are two major layouts for Bootstrap that are Fluid Layout and Fixed Layout.
- Fluid-layout: This uses the bootstrap .container-fluid class for the layout. This layout uses proportional values such as measuring units for a block of content, images, or any other item. Used for creating an element that is 100 % wider and covers all the screen widths. Fluid layout continuously resizes as you change the width of your browser by any amount, leaving no extra empty space on the sides ever Hence it is named “fluid layout”.
- Fixed-layout: This uses the bootstrap .container class for the layout. The fixed-layout has specific pixel width values that change its width value with the help of media queries. It provides a responsive fixed-width container. Fixed layout resizes in chunks at several certain widths as pixels values are specified.
Step by step guide for the implementation:
Step1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
Step 3: Create a new <div> for adding different layout classes.
Step 4: Information must be placed within a .container (fixed layout) or .container-fluid (fluid layout) class for proper alignment and padding .
Example 1: This example shows the fixed layout.
Example 2: This example shows the working of fluid layout.
Example 3: This example shows us the difference between fixed and fluid layouts. Different outputs are achieved for different screen sizes for fixed and fluid layouts.
Note: Fixed layout resizes in chunks at several certain widths whereas fluid layout continuously resizes as you change the width of your browser by any amount.