How grid system works in Bootstrap?

Web Development
,
#1

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.