06 Oct 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:

.col-

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

.col-sm-

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

.col-md-

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

.col-lg-

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

.col-xl-

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

Output

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

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

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 Alerts
• Bootstrap Badges
• Bootstrap Progress Bars
• Bootstrap Navbar
• Bootstrap Navigation Tabs & Pills
• Bootstrap Pagination
• Bootstrap Images
• Bootstrap Tooltips
• Bootstrap Cards
• Bootstrap Collapse
• Bootstrap Dropdown
• Bootstrap Forms