Bootstrap

Bootstrap Lesson 5: How Bootstrap Grid System works?

What is Grid System How its works Bootstrap

In the previous bootstrap tutorial, we have studied bootstrap and learned that how we can create responsive forms, navigation menu bar using bootstrap. Now in this knowledge bit, we will learn about bootstrap grid system. We will demonstrate that how we can use grid system in our project.

What is Bootstrap Grid System?

The bootstrap grid system is one of the powerful mobile-first libraries of HTML and CSS component which allow you to create the responsive website layout in the quick and easy way. Every container in bootstrap can be divided into 12 different columns and unlimited rows. Grid system uses multiple containers, rows, and columns to layout and aligns content. The bootstrap grid system is built with powerful mobile-first flexbox and it is fully responsive.

So Bootstrap Grid System is made up of 3 important component:

  1. A container
  2. Rows
  3. Columns

Now let see how gird system works, the first thing we need to do is create an HTML skeleton page and include bootstrap. We have used the page that we have created in last bootstrap tutorial.

Source code:

<!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">
</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>
<!-- 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>       

 

This is how our skeleton page looks like:

Bootstrap grid system example

First we need to create <div> with class container and inside that <div> element, we will create a div with class row. Inside of each row class <div>, we have 12 unit to pick from. We create 2 div inside class row <div> and splitting grid by 50% so each div that takes up to 6 out of 12. Here is code below:

 

<div class="container">

<div class="col-lg-6 green">The First Grid</div>

<div class="col-lg-6 green">The Second Grid</div>

</div>       

 

Let see how the output would look like:

 

Bootstrap tutorial: Bootstrap grid system example

Explanation:

You can see we have two <div> that take up exactly half of the container and <div> divided into two. So now we can go back and play around a little bit more and let’s try adding in a third column. This time we will make the middle column 8 units and then the left and right will be 2 units. Here is the code below:

 

<div class="container">

<div class="col-lg-2 green">The First Grid 2 unit</div>

<div class="col-lg-6 green">The Second Grid 8 unit</div>

<div class="col-lg-2 green">The Second Grid 2 unit</div>

</div>       

 

This is how the output looks like:

 

So that’s a very basic concept underlying all of the bootstrap grid systems. We have 12 units going across whatever container we are working inside of and we can designate those 12 units in any way that we want. If can create 12 column in one row with unit 1 like this below:

 

<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>       

 

Here is the output:

You can notice each grid takes up one unit or equal size. Now I will show you how we can add another row, in that row we will create three column with equal size like 4 units for each column. Here is code below:

 

<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>       

 

Here is the illustration of the output below:

 

Conclusion:

In this Bootstrap tutorial, we have learned that how we can create Bootstrap grid. We have also seen that how we can split one row into different size of the grid system. Now in the upcoming bootstrap tutorial, we will see that how we can create the responsive grid and how to create the different layout at different sizes.

Click to comment

Most Popular

To Top