Bootstrap

Bootstrap Lesson 6: Create Responsive and Nested Grid System using Bootstrap

Bootstrap Responsive grid system

In the previous Bootstrap tutorial, we have introduced grid system and discuss how grid system works in bootstrap. Now in this knowledge bit, we are going to learn that how the layout works on 4 different sizes screen like for extra small, small, medium, and large screen devices. We will also learn to create responsive and Nested Grid System using Bootstrap.

Create Responsive and Nested Grid System using Bootstrap:

So now we are using the HTML skeleton that we have created in the last Bootstrap tutorial. In that tutorial, we have created grid system which takes up some unit and when we reduce the width of the screen the screen then the single grid will take 12 unit, and would not automatically adjust the screen resolution. Here is our HTML skeleton:

 

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Navbar Tutorial</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style type="text/css">
.green{
background: yellow;
border: 1px solid lightgreen;
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">GeeksRead</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign Up</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-1 green">1 unit</div>
<div class="col-lg-1 green">1 unit</div>
<div class="col-lg-1 green">1 unit</div>
<div class="col-lg-1 green">1 unit</div>
<div class="col-lg-1 green">1 unit</div>
<div class="col-lg-1 green">1 unit</div>
<div class="col-lg-1 green">1 unit</div>
<div class="col-lg-1 green">1 unit</div>
<div class="col-lg-1 green">1 unit</div>
<div class="col-lg-1 green">1 unit</div>
<div class="col-lg-1 green">1 unit</div>
<div class="col-lg-1 green">1 unit</div>
</div>
<div class="row">
<div class="col-lg-4 green">4 unit</div>
<div class="col-lg-4 green">4 unit</div>
<div class="col-lg-4 green">4 unit</div>
</div>
</div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>       

 

You can notice that we have created grid system and this grid system does adjusting screen size when we reducing the screen size. Here is the output of our HTML page below:

 

Nested Grid System using Bootstrap tutorial

 

So now we want different sizes and content for larger screen and medium screen, to do that we will add another class col-md-*. Here col means column and “md” mean medium screen while I used the asterisk * which mean the size it will take up, like 1 unit, 2 unit, 3 unit, etc. Now we are going to create 4 different grid with unit 3, every grid will automatically adjust its size for different resolution screens Here is the code

 

<div class="container">
<div class="row">

<div class="col-lg-3 col-md-3 green">3 unit</div>

<div class="col-lg-3 col-md-3 green">3 unit</div>

<div class="col-lg-3 col-md-3 green">3 unit</div>

<div class="col-lg-3 col-md-3 green">3 unit</div>

</div>

</div>       

Explanation:

You can notice that we have created one row and 4 column and used two classes col-lg-3 and col-md-3 for each column. This is how our output would look like:

 

 

Responsive Grid System using Bootstrap

 

You can notice that we have three different layouts for the different resolution. Every 4 grids on the large size of the screen take up 3 units out of 12 units. At the medium size, it will do the same thing take up 3 units each grid but on the small size resolution, each four grid will take up to 100% of the unit or 12 unit.

 

If we want to the grid on the small size take 6 units then we will use the class col-sm-* where col mean column, sm means small while * is the number of the column that it will take up on the small resolution. Here is the code below:

 

<div class="container">

<div class="row">

<div class="col-lg-3 col-md-3 col-sm-6 green">Grid units</div>

<div class="col-lg-3 col-md-3 col-sm-6 green">Grid units</div>

<div class="col-lg-3 col-md-3 col-sm-6 green">Grid units</div>

<div class="col-lg-3 col-md-3 col-sm-6 green">Grid units</div>

</div>

</div>       

 

The output would look like this:

 

Bootstrap tutorial: Nested Grid System

You can notice that we have four different resolution one is the extra small resolution where grid taking up all the 12 units. Then we have small size resolution, where every 4 grids taking 6 units. All the four grids on medium and large screen resolution taking up 3 units.

Difference Between col-lg-*, col-md-* and col-sm-*

The bootstrap use grid system and these grids consist of 12 column in a row. We can use four different sizes or tiers in the same row. Where lg, md, sm, and xs are the sizes of the grids and these sizes automatically adjust the size of grids according to the resolution of the devices.

  • .col-lg-* is used for Large resolution screen like laptops/desktops.
  • .col-md-* is used for Medium resolution screen like small resolution laptops.
  • .col-sm-* is used for Small resolution screen like tablets.
  • .col-xs-* is used for Extra small resolution screen like smartphones

The Nested Grid System:

The nested grid system is like nest your content with default grid. This means we can further divide our grid into 12 units. You can notice that we have three units grid in above example. Now if we want to further divide the 3 unit grid into 12 units then we will create another <div> inside the 3 unit div and further divide it using bootstrap classes. Here is the example below:

 

<div class="container">

<div class="row">

<div class="col-lg-3 col-md-3 col-sm-6 green">

<div class="row">

<div class="col-lg-6 yellow">First</div>

<div class="col-lg-6 yellow">Second</div>

</div>

</div>

<div class="col-lg-3 col-md-3 col-sm-6 green">Grid units</div>

<div class="col-lg-3 col-md-3 col-sm-6 green">Grid units</div>

<div class="col-lg-3 col-md-3 col-sm-6 green">Grid units</div>

</div>

</div>       

 

You can notice in the following screenshot that the first grid is divided into two grids and have units 6.

 

 

So the grid system is really powerful and makes responsive designing easy and simple. With bootstrap CSS we can quickly design the responsive layout for different resolution screen.

Conclusion:

In this bootstrap tutorial, we have learned the grid system. We have also seen that how grid system works and learned how we can create responsive and nested grid system using bootstrap layout for different resolutions screen. We have also introduced the concept of the nested grid system and seen how we can divide a grid into further 12 units of grids.

Click to comment

Most Popular

To Top