Stacked to Horizontal Bootstrap Grids

In one of the earliest articles of this series, we studied the basics of bootstrap grid system. We saw what different types of bootstrap grids are and how we can create such grids. We also studied how to create different layout types using grids. This article exploits the responsive nature of bootstrap grid system to create stacked to horizontal bootstrap grids. The grids will appear stacked upon each other on small devices e.g mobile/tablets and will appear horizontally adjacent to each other on medium and large devices.

To see how we can create stacked to horizontal bootstrap grids, have a look at the following example. The following script contains a web page with two bootstrap grids. The first grid will expand to three columns while the second shall expand to 9 columns. This means that on large devices, first grid will take 25% of the width of the screen while the second grid shall take the remaining 75% of the width. However, on small devices, both grids will take 100% width of the screen and will be stacked on each other. Again if you increase the screen size, the stacked grid will become horizontal. Have a look at this code.

<!DOCTYPE html>
<html>
    <head>
           
    <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/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        
    </head>
    
    <body>
        
        <div class="container">
          <h1>Knowledge Hills</h1>
          <div class="row">
            <div class="col-sm-3" style="background-color:skyblue;">
              <p>Grid with 25% width</p>
            </div>
            <div class="col-sm-9" style="background-color:gray;">
              <p>Grid with 75%</p>
            </div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

If you open the above webpage in browser, you should see a two grids. One with skyblue background and the other with gray background. If you are on a very small screen e.g a mobile or tablet, you should see that these grids take 100% of the screen width and are stacked vertically upon each other. On the other hand, on large screens, the skyblue grid takes 25% of the screen width while gray grid takes 75% of the width. Both the grids are arranged horizontally upon each other.

Full width Layout

In the last example the width of the screen was fixed and centered with some margins on both left and right. You can create full-width layout by replacing the “container” class with “container-fluid” class in the outer div.Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <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/3.0.0/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">
          <h1>Knowledge Hills</h1>
          <div class="row">
            <div class="col-sm-3" style="background-color:skyblue;">
              <p>Grid with 25% width</p>
            </div>
            <div class="col-sm-9" style="background-color:gray;">
              <p>Grid with 75%</p>
            </div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

<<< Bootstrap AffixBootstrap Grid on Small Devices >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .