Bootstrap Grid For Large Devices

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

Large devices are devices with screen width greater than 1200 pixels. To create grid-based layouts for large devices use “col-lg-x” class to a div. Here x is the number of columns out of 12 that 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 large screens, six grids should take 16.67% percent each of the width of the screen. This means that each of these three grids will have col-md-2 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-lg-2" style="background-color:skyblue;">
              <p>Grid width 16.67%</p>
            </div>
            <div class="col-lg-2" style="background-color:gray;">
              <p>Grid width 16.67%</p>
            </div>
              <div class="col-lg-2" style="background-color:pink;">
              <p>Grid width 16.67%</p>
            </div>
            <div class="col-lg-2" style="background-color:skyblue;">
              <p>Grid width 16.67%</p>
            </div>
            <div class="col-lg-2" style="background-color:gray;">
              <p>Grid width 16.67%</p>
            </div>
              <div class="col-lg-2" style="background-color:pink;">
              <p>Grid width 16.67%</p>
            </div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

Open the above page in the browser, you should see six columns with sky blue, gray and pink backgrounds for two grids. Reduce the size of your browser until the columns grids 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 large i.e. greater than 1200 pixels, bootstrap grid system tells the browser to display the columns horizontally. Now you should see six grids horizontally placed on the page. Each grid will cover 16.67% 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-lg-2" style="background-color:skyblue;">
              <p>Grid width 16.67%</p>
            </div>
            <div class="col-lg-4" style="background-color:gray;">
              <p>Grid width 33%</p>
            </div>
              <div class="col-lg-4" style="background-color:pink;">
              <p>Grid width 33%</p>
              </div>
             <div class="col-lg-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 For Medium DevicesBootstrap Grid For Multiple Screen Sizes >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .