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”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
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.
HTML
<!DOCTYPE html> < html > < head > < title >Fixed Layout</ title > < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> < script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" > </ script > < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > </ script > < style type = "text/css" > body { padding-top: 50px; } </ style > </ head > < body > < div class = "container" > <!-- for page header --> < div class = "jumbotron" > < h1 >Fixed Layout</ h1 > < p > Also known as a .container layout. 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 so that's why its called as “fixed width” because pixels values are specified. </ p > </ div > </ div > </ body > </ html > |
Output:
Example 2: This example shows the working of fluid layout.
HTML
<!DOCTYPE html> < html > < head > < title >Bootstrap Fluid Layout</ title > < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> < script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" > </ script > < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > </ script > </ head > < body > < div class = "container-fluid" > < div class = "jumbotron" > < h1 >Fluid Layout</ h1 > < p > Also known as the .container-fluid layout. This layout uses proportional values such as measuring unit for a block of content, images or any other item. Used for creating an element that is 100 % wider and covers all the screen width. 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 as “fluid layout”. </ p > </ div > </ div > </ body > </ html > |
Output:
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.
HTML
<!DOCTYPE html> < html > < head > < title >Bootstrap Layouts</ title > < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> < script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" > </ script > < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > </ script > </ head > < body > < div class = "container-fluid" > < div class = "jumbotron" > < h1 style = "color: green" >Fluid Layout</ h1 > < p style = "color: #000" > A Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles. If you’re preparing out for a tech interview with a product- based company or planning to do the same? Are you looking for a DSA Course? Don’t know how to begin with data structures and algorithms? .. Then you are at the right place. </ p > </ div > </ div > < div class = "container" > < div class = "jumbotron" > <!-- for page header --> < h1 style = "color: green" >Fixed Layout</ h1 > < p style = "color: #000" > A Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles. If you’re preparing out for a tech interview with a product- based company or planning to do the same? Are you looking for a DSA Course? Don’t know how to begin with data structures and algorithms? .. Then you are at the right place. </ p > </ div > </ div > </ body > </ html > |
Output:
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.