Row grid system in bootstrap

Bootstrap is one of the best framework available in the market to design responsive web pages. Here I will mainly focus on the coding part, so let’s get started. Here in the below image, you can see that I have created four rows and with the different number of columns.

Rows and columns in bootstrap
Final Output

In bootstrap, each row is divided into 12 fixed number of columns.  Using this fixed number of columns we need to design our web design.

Bootstrap supports all type of screen sizes like small mobile devices to the large computer.

  • col-xs-1-12 (extra small devices like mobile)
  • col-sm-1-12 (small devices)
  • col-md-1-12 (medium screen size like a tablet)
  • col-lg-1-12 (large screen devices like a laptop)
  • col-xl-1-12 (extra large screen size)

In order to create a row in bootstrap define a container with the class of row property.

<div class=”container-fluid row”>


We have created our first row now its time to create columns. For this, you use the property col-lg-x where x can any number of columns between 1 to 12.


Leave a Reply

Your email address will not be published. Required fields are marked *