How to build a grid system in Bootstrap

Bootstrap is undoubtedly one of the most popular front-end frameworks. With more than 73k stars and 27k forks, Bootstrap is also one of the most popular GitHub repositories. The Grid System is one of the most important concepts in Bootstrap. This article will guide you through this interesting topic.

What is the Bootstrap Grid System?

Like any grid system, the Bootstrap grid is a library of HTML/CSS components that allow you to structure a website and place a website’s content in desired locations easily.

Think of graph paper, where every page has a set of vertical and horizontal lines. When these lines intersect, we get squares or rectangular spaces.

Now the question is, how many rows and columns you can create using Bootstrap’s Grid System? Bootstrap allows you to create up to 12 columns and unlimited rows – hence the name 12 grid system. So, let’s see how we can utilize this grid system to create various types of layouts.

Bootstrap’s Grid System is made up of 3 elements:

1. A container
2. Rows
3. Columns

Creating a Container

Bootstrap’s grid system needs a container to hold rows and columns. A container is a simple <div> element with a class of .container. The container is used to provide a proper width for the layout, acting as a wrapper for the content.

Have a look at the following example:

<div class="container">
  <h1>Bootstrap Grid demo</h1>
</div>

<p class="p">Demo by Syed Fazle Rahman. <a href="understanding-bootstrap-grid-system">See article</a>.</p>

Creating a Row

A row acts like a wrapper around the columns. The row nullifies the padding set by the container element by using a negative margin value of -15px on both the left and right sides. A row spans from the left edge to the right edge of the container element. It is created by adding the class .row to a block level element inside the container.

<div class="container">
  <div class="row">
    <h1>Bootstrap Grid demo with row</h1>
  </div>
</div>

<p class="p">Demo by Syed Fazle Rahman. <a href="understanding-bootstrap-grid-system">See article</a>.</p>

Creating Columns

Bootstrap uses different column class prefixes for different sized devices.

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1>Bootstrap Grid demo with row and column</h1>
    </div>
  </div>
</div>

<p class="p">Demo by Syed Fazle Rahman. <a href="understanding-bootstrap-grid-system">See article</a>.</p>

In the above demo, I used the class .col-xs-12 to create a single column that spans across 12 virtual Bootstrap columns. Hence, this column’s width will be the width of the row.

Read the complete tutorial on how to build a grid system in Bootstrap.