How many types of layouts are there in Bootstrap ? - GeeksforGeeks

20 Aug, 2021
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 2: Add <style> tag and add CSS properties to it that you need.
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:
Fixed layout
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 geeks. 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 geeks. 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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-4
Bootstrap-Questions
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property