Skip to main content

Bootstrap 5 Grid Basic

Bootstrap Grids​

Bootstrap Grid system is a powerful and flexible layout system that allows developers to create responsive and mobile-first designs quickly and easily.

The grid is based on a 12-column layout, with each column having a fixed width and gutters between them that provide spacing.

The grid system is divided into two parts: rows and columns.

  • Rows: A row is a container that holds a set of columns. Rows are used to create horizontal groups of columns. Rows should be placed within a container to ensure proper alignment and padding.

  • Columns: Columns are the building blocks of the grid system. They can be used to create responsive layouts by specifying how many columns they should span at different screen sizes. Columns should always be placed within a row.

Bootstrap 5 uses a flexbox-based grid system, which means that columns are aligned using flexbox properties.

As an example:

To create a row with two equal columns, you would use the following HTML.

<div class="row">
     <div class="col">Column 1</div>
     <div class="col">Column 2</div>
</div>

In this example:

  • The row class creates a container for the columns, and the col class specifies that each column should take up an equal amount of space.

Responsive Columns​

columns can be made responsive by using different classes for different screen sizes.

The responsive classes are based on the same grid system as the regular column classes, but are prefixed with a breakpoint abbreviation to target specific screen sizes.

The available breakpoint abbreviations and their corresponding screen sizes are:

  • xs (extra small): <576px
  • sm (small): ≥576px
  • md (medium): ≥768px
  • lg (large): ≥992px
  • xl (extra large): ≥1200px
  • xxl (extra extra large): ≥1400px

As an example:

<div class="row">
     <div class="col-4 col-sm-6">Responsive Column</div>
</div>

In this example:

  • The col-4 class sets the column to take up 4 out of 12 columns on all screen sizes, while the col-sm-6 class sets the column to take up 6 out of 12 columns on small screens and above.