Bootstrap nowadays is very popular among Front-end web developers, perhaps it is the most popular front-end frameworks now. In this article, we specifically will discuss about the most important concepts in Bootstrap, i.e. Bootstrap Grid System.
What is the Bootstrap Grid System?
Generally, Grid system makes you easier to structure a website and place contents in your desired locations easily. Bootstrap Grid system makes you easier to build responsive website layout. Bootstrap grid system is based on 12 columns, so to maintain the columns in one line, the sum of the grid column numbers in each row must be equal to 12.
Working of Bootstrap Grid System
Bootstrap’s Grid System is created of 3 things:
- A container
Bootstrap’s grid system needs a container to contain rows and columns. The container is used to supply a proper width and padding for the layout.
- Rows
A row is used to be a wrapper for the columns.
- Columns
Bootstrap’s grid system uses distinct column class prefixes for distinct sized devices. You can take a look at this following table.
| Class Prefix | Device Size |
| .col-xs- | <768px |
| .col-sm- | 768px to 991px |
| .col-md- | 992px to 1199px |
| .col-lg- | ≥ 1200px |
And here is how the Bootstrap Grid System works:
- Rows must be located within a .container class for harmonizing padding and alignment.
- Use rows to produce horizontal groups of columns.
- Content must be put within the columns, and just columns that may be the direct children of rows.
- Predefined grid classes like .row and .col-xs-6 are prepared to quickly make grid layouts.
- Columns make gaps (between column content) via padding. That padding is offset in rows for the first and the last column via negative margin on .rows.
- Grid columns are established by specifying the number of twelve available columns you wish to span.
Media Queries
As we all know, media queries are used to apply CSS, based on certain conditions that have been set. If the conditions are satisfied, the style will be applied.
Bootstrap’s media queries allow you to hide, show, and move content based on the viewport size.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px ) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }
Sometimes we need this kind of media queries (adding max-width) to limit CSS to a tighter set of devices
@media (max-width: 767px) { ... }
@media (min-width: 768px) and (max-width: 991px) { ... }
@media (min-width: 992px) and (max-width: 1199px) { ... }
@media (min-width: 1200px) { ... }
That’s all for ‘Learning Bootstrap Grid System Part 1’. Stay tuned for more explanation of creating columns and the examples of it on ‘Learning Bootstrap Grid System Part 2’.
