Bootstrap5 grid system

Grid system rules

Bootstrap5 grid system rules:

• Each row of the grid needs to be set up .container (fixed width) or .container-fluid (full screen width) class, so that you can automatically set some outer and inner margins.

• Use rows to create horizontal column groups.

• The content needs to be placed in a column, and only the column can be a direct child of the row.

• Predefined classes such as .row and .col-sm-4 can be used to quickly make grid layout.

• The column fills the gap between the contents of the created column. This gap is through .rows the negative margin on the class sets the offset of the first row and the last column.

• Grid columns are created by spanning 12 specified columns. For example, to set up three equal columns, you need to use three .col-sm-4 to set up.

• Bootstrap 5 and Bootstrap 4 use flexbox (elastic boxes) instead of floats. One of the advantages of Flexbox is that grid columns with no specified width are automatically set to equal width and equal height columns. If you want to know more about Flexbox, you can read our CSS Flexbox tutorial.

The following table summarizes how Bootstrap grid systems work on different devices:

We combine the above classes to create a more flexible page layout.

Tip: each class is scaled up, so if you want to set sm and md to have the same width, you just need to specify sm.

Basic structure of Bootstrap5 grid

<!-- First example: Controlling the width of columns and how to display them on different devices -->
<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- Second example: Or let Bootstrap automatically handle the layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

The first example: create a line <div class="row"> ). Then, add the required columns ( .col-*-\* class). The first asterisk ( ) device that represents the response: sm, md, lg or xl, Second asterisk ( Represents a number, and the numbers on the same line add up to 12.

The second example: not in every col let bootstrap process the layout automatically, with each column in the same row equal in width: two “col”,each 50% wide. Three “col” each are 33.33% wide, four “col” each are 25% wide, and so on. Similarly, you can use the .col-sm|md|lg|xl to set the response rules for the column.

Next we can look at examples.

Create columns of equal width, Bootstrap automatic layout

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Equal width response column

The following example demonstrates how to create responsive columns of equalwidth on a flat panel and a larger screen. On a mobile device, where the screen width is less than 576px, the four columns will be stacked up and down:

<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>

Unequal width response column

The following example demonstrates the creation of responsive columns of unequal width on a flat panel and a larger screen. On a mobile device, that is, when the screen width is less than 576px, the two columns are stacked up and down:

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Set the width of a column

If you set the width of only one column, the other columns will automatically divide the remaining widths. The following example will have acolumn width of 25%, 50%, 25%:

Example

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</div>