Bootstrap Grids

In this lesson, understand the Grid Structure of Bootstrap, and how to create a responsive grid for extra small, small, medium-sized, large, and extra-large devices. Live running of code to make it easier for newbies to understand the different sizes of a screen and how to design them with Bootstrap.

What is Bootstrap Grids

The Grids define 12 columns on a web page i.e. the responsive grid. If you want to create a group of columns, then use the rows class. It supports five classes in Bootstrap:


  • Device: <576px i.e. Extra Small Devices
  • Example: <div class=”col-3″>One</div>


  • Device: >=576px i.e. Small Devices
  • Example: <div class=”col-sm-1″>One</div>


  • Device: >=768px i.e. Medium Devices like iPad
  • Example: <div class=”col-md-1″>One</div>


  • Device: >=992px i.e. Large Devices
  • Example: <div class=”col-lg-1″>One</div>


  • Device: >=1200px i.e. Extra Large Devices
  • Example: <div class=”col-xl-1″>One</div>

Example: For four equal columns, use four “.col-sm-3”

Bootstrap Grids – Example

The following is the code to create and run a web page with Grids in Bootstrap:


Bootstrap Grids Example 1

The above is visible for a screen size of 580×300.

Now, the output with a screen size of 750×270:

Bootstrap Grids

Video Tutorial – Bootstrap Grids

The following is the complete video tutorial to learn how to work with Grids in Bootstrap:

If you liked the tutorial, spread the word and share the link and our website Studyopedia with others:

Read More:

Bootstrap First Example
Bootstrap Tables
Studyopedia Editorial Staff
[email protected]

We work to create programming tutorials for all.

No Comments

Post A Comment

Discover more from Studyopedia

Subscribe now to keep reading and get access to the full archive.

Continue reading