Bootstrap Grid For Multiple Screen Sizes

In the last three articles, we saw how we can create layouts for small, medium and large screen sizes using bootstrap grid systems. However, in most of the web applications you are going to develop, you will be targeting small, medium and large devices. You will not be developing separate applications for different screen sizes. Rather you will have to develop an application which adjusts itself to changing screen sizes. Bootstrap helps you do this as well.

Let’s create a webpage with four bootstrap columns. On extra small screens, the columns will be stacked vertically upon each other. On small screen the four columns will have column width in ratio of 1:5:5:1. For medium devices the ratio of the width for four columns will be 2:4:4:2. Finally for large devices the ratio will be 3:3:3:3. This means that for large devices each column will have equal width. Take a look at the following example to understand this concept.

<!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-1 col-md-2 col-lg-3" style="background-color:skyblue;">
              <p>Column1</p>
            </div>
            <div class="col-sm-5 col-md-4 col-lg-3" style="background-color:gray;">
              <p>Column2</p>
            </div>
              <div class="col-sm-5 col-md-4 col-lg-3" style="background-color:pink;">
              <p>Column3</p>
              </div>
             <div class="col-sm-1 col-md-2 col-lg-3" style="background-color:skyblue;">
              <p>Column4</p>
            </div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

Open the above page in browser and decrease the size of the browser so that all the columns are vertically stacked upon each other. Now, start increasing the size of browser, when the screen size becomes greater than 767 pixels, you shall see the four columns arranged horizontally. The two outer columns will take 1/12 of the total width of the screen. The inner two columns will take 5/12 of the screen size. Similarly, when the screen size becomes greater than 991 pixels i.e. medium, you shall see that two outer columns will take 2/12 of the total width of the screen. The inner two columns will take 4/12 of the screen size. Finally, when the screen size becomes greater than 1200 pixels i.e. medium, you shall see that all the four columns have equal 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-1 col-md-2 col-lg-3" style="background-color:skyblue;">
              <p>Column1</p>
            </div>
            <div class="col-sm-5 col-md-4 col-lg-3" style="background-color:gray;">
              <p>Column2</p>
            </div>
              <div class="col-sm-5 col-md-4 col-lg-3" style="background-color:pink;">
              <p>Column3</p>
              </div>
             <div class="col-sm-1 col-md-2 col-lg-3" style="background-color:skyblue;">
              <p>Column4</p>
            </div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

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