DEV Community

eleonorarocchi
eleonorarocchi

Posted on

Bootstrap 5: grid system

The Bootstrap grid-system offers a simple and powerful way to create responsive layouts and therefore suitable for all shapes and sizes.

A grid-system is a set of CSS rules useful for managing the arrangement of content on a page.
It divides the container into multiple columns with dimensions and spaces consistent with each other.

It is based on flexbox.

The layout adapts flexibly to the display used (Responsive Design).
The space is filled or the elements are juxtaposed together so that everything is ordered.
It works with two axes: the main one horizontally, the transverse one vertically.

It uses a twelve column per row system and six predefined reactive levels (breakpoints).

Characteristics of the grid-system

Image description

Applying a .col-sm-* class to an element will affect small devices, but also medium, large and extra large devices if the specific .col-md-* .col-lg-* classes are not present, .Col-xl-, or .col-xxl-

How use it

  • You create a container that acts as a wrapper using a container class such as .container

  • You create lines inside the container using the .row class

  • Columns are created within any row using the classes .col-, .col-sm-, .col-md-, .col-lg-, .col-xl-* and .col-xxl-*

If you want to see some example, see the document

Top comments (0)