Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How many types of layouts are there in Bootstrap ?

  • Difficulty Level : Medium
  • Last Updated : 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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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=
    <script src=
    </script>
    <script src=
    </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=
    <script src=
    </script>
    <script src=
    </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=
    <script src=
    </script>
    <script src=
    </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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!