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:
No Comments