Bootstrap grid system provides the fastest and easiest way to create layouts of web pages. It introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or view port size increases. It includes predefined grid classes for making grid layouts for various types of devices, like phones, tablets, desktop, and so on, as well as powerful mixings for generating more semantic layouts.
The Grid Sizes
It has four tiers of classes: xs, sm, md and lg. You can use any combination of these classes to create more dynamic and flexible layouts. The following is the breakdown of the various sizes of these classes.
| Classes |
Devices |
Size |
| .col-xs-* |
Extra Small Phones |
Less than 768px |
| .col-sm-* |
Small Devices Tablets |
768px and Up |
| .col-md-* |
Medium Devices Desktops |
992px and Up |
| .col-lg-* |
Large Devices Large Desktops |
1200px and Up |
Structure of Bootstrap Grid Layout,
Working of Bootstrap Grid System
Grid systems are used for creating page layouts through a series of rows and columns . Here's how the Bootstrap grid system works,
- Rows must be placed within a .container and .container-fluid class for proper alignment and padding.
- Use rows to create horizontal groups of columns.
- Content should be placed within columns and only columns may be immediate children of rows.
- Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixings can also be used for more semantic layouts.
- Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
