Bootstrap Grid on Small Devices

The last article explained how can we create bootstrap grids which switch from stacked to horizontal upon the change of screen size. This principle lays at the foundation of responsive nature of bootstrap framework. Responding to the changing screen size is what makes bootstrap extremely useful. This article explains how you can use bootstrap grid on small devices.

Small devices are devices with screen width ranging from 768 pixels to 991 pixels. Screens less than this pixel range are considered extra small.To implement grid system for small devices use “col-sm-x” class with each div. Here x is the number of columns out of 12 that this div will take. Always remember that the number of columns of all the grids in row should be equal to 12.

Let’s have a look at our first example. Here we shall specify that on small screens, the three grids should take 25%, 50% and 25% percent of the width of the screen. This means that these three grids will have 3, 6 and 3 columns, respectively. Take a look at the following script.

<!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%</p>
            </div>
            <div class="col-sm-6" style="background-color:gray;">
              <p>Grid with 50%</p>
            </div>
              <div class="col-sm-3" style="background-color:pink;">
              <p>Grid with 25%</p>
            </div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

Open the above page in the browser, you should see three grids with sky blue, gray and pink backgrounds. Reduce the size of your browser until the three grids are vertically stacked upon each other. This is the extra-small screen size. Now, again increase the size of your browser. When the screen size becomes small i.e. greater than 768 pixels, bootstrap grid system tells the browser to display the grid horizontally. Now you should see three grids horizontally placed on the page. The sky blue grid takes 25% of the page, while gray takes 50% and pink also takes 25%. Another important thing to note here is that if you do not specify grid sizes for medium and large devices, the grid sizes for small devices will apply on those devices as well.

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%</p>
            </div>
            <div class="col-sm-3" style="background-color:gray;">
              <p>Grid with 25%</p>
            </div>
              <div class="col-sm-3" style="background-color:pink;">
              <p>Grid with 25%</p>
            </div>
            <div class="col-sm-3" style="background-color:beige;">
              <p>Grid with 25%</p>
            </div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

This article explained how to use bootstrap grid on small devices. In the next article, we shall how we can use bootstrap grid on medium devices.

<<< Stacked to Horizontal Bootstrap GridsBootstrap Grid For Medium Devices >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .