Bootstrap Grid For Medium Devices

The last article explained how we can use bootstrap grid system to create layouts for small devices. We created three column and four column layouts using bootstrap grid system for small devices. This article explains how you can use bootstrap grid for medium devices. In this article we shall create a three column as well as a four column layout on medium devices using bootstrap grids.

Medium devices are devices with screen width ranging from 992 pixels to 1200 pixels. Screens less than 992 pixels are considered small and larger than 1200 pixels are considered extra large.To create grid-based layouts for medium devices use “col-md-x” class to a div. Here x is the number of columns out of 12 that the 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 medium screens, the three columns should take 33% percent each of the width of the screen. This means that each of these columns grids will have col-md-4 class. 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-md-4" style="background-color:skyblue;">
              <p>Grid with 33%</p>
            </div>
            <div class="col-md-4" style="background-color:gray;">
              <p>Grid with 33%</p>
            </div>
              <div class="col-md-4" style="background-color:pink;">
              <p>Grid with 33%</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 columns are vertically stacked upon each other. This is the small screen size. Now, again increase the size of your browser. When the screen size becomes medium i.e. greater than 991 pixels, bootstrap grid system tells the browser to display the grid horizontally. Now you should see three columns horizontally placed on the page. Each grid will cover 33.33% of the screen width.

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-2" style="background-color:skyblue;">
              <p>Grid width 16.67%</p>
            </div>
            <div class="col-sm-4" style="background-color:gray;">
              <p>Grid width 33%</p>
            </div>
              <div class="col-sm-4" style="background-color:pink;">
              <p>Grid width 33%</p>
              </div>
             <div class="col-sm-2" style="background-color:skyblue;">
              <p>Grid width 16.67%</p>
            </div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

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

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