Bootstrap grid is a powerful system for building mobile-first layouts. It’s very extensive tool with a great number of options. Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.
The Bootstrap grid system has four classes:
- xs (for phones - screens less than 768px wide)
- sm (for tablets - screens equal to or greater than 768px wide)
- md (for small laptops - screens equal to or greater than 992px wide)
- lg (for laptops and desktops - screens equal to or greater than 1200px wide)
The classes above can be combined to create more dynamic and flexible layouts.
Container:
Bootstrap requires a containing element to wrap site contents and house our grid system. Without a container, the grid won’t work properly.
Row:
Rows create horizontal groups of columns. Therefore, if you want to split your layout horizontally, use a row.
Columns:
Bootstrap’s grid system allows up to 12 columns across the page.