Bootstrap Grid System
Bootstrap Grid System : Today we are going to discuss on grid system in bootstrap. Bootstrap’ grid system is responsive, and the columns will re-arrange depending on the screen size.
Incoming search terms
Bootstrap Grid System, Grid System in Bootstrap, Understanding Bootstrap’s Grid System, Understanding the Bootstrap 3 Grid System, Bootstrap 3 Grids Explained, Grid Template for Bootstrap, Twitter Bootstrap Grid System tutorial, Bootstrap 3 Grid Introduction, Bootstrap 3: the new grid system for starters.
What is Bootstrap Grid System?
The Bootstrap grid system provides the fast and easy way to create layouts of web pages. Bootstrap 3 introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Bootstrap’s grid system allows up to 12 columns across the page.
If you do not want to use all 12 column individually, you can group the columns together to create wider columns:
|span 1||span 1||span 1||span 1||span 1||span 1||span 1||span 1||span 1||span 1||span 1||span 1|
|span 4||span 4||span 4|
|span 4||span 8|
|span 6||span 6|
The Bootstrap grid system has four classes:
- xs (for phones)
- sm (for tablets)
- md (for desktops)
- lg (for larger desktops)
The classes above can be combined to create more dynamic and flexible layouts.
Grid System Rules
- Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) 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 classes like .row and .col-sm-4 are available for quickly making grid layouts
- Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
- Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
The following table summarizes how the Bootstrap grid system works across multiple devices:
Bootstrap 3 Grid System
|Extra small devices
|Max container width||None (auto)||
|Max column width||
Bootstrap’ grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items where stacked on top of each other.
Be back soon with real example of grid system…