Bootstrap 5 Grid System Basic

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content , its built with flexbox and allows up to 12 columns across the page.

Basic Structure of a Bootstrap 5 Grid

The following is a basic structure of a Bootstrap 5 grid system:

<!-- Control the designer the column width Example 1-->
<div class="row">
  <div class="col-*-*"></div> /*col-sm-1, col-md-1, col-lg, col-xl-1 or xxl*/
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- let Bootstrap automatically render the layout Example 2-->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Bootstrap 5 Grid options – Example 1

Bootstrap’s grid system can render across all six default breakpoints, and if any breakpoints as per the customization. Following are the six default grid tiers:

Extra small (xs) – .col-
Small (sm) – .col-sm-
Medium (md) – .col-md-
Large (lg) – .col-lg-
Extra large (xl) – .col-xl-
Extra extra large (xxl) – .col-xxl-

Auto-layout columns Example – 2

If no column widths are specified to the Col component will render equal width columns

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
</div>

Equal-width

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Setting one column width in a row

You can also set width for one specific column and the rest of the bootstrap columns will auto resize around it. we can use predefined grid classes , grid mixins, or other inline widths.

Mix and match with Different Column sizes in a tier

Use a combination of different classes for each row as needed. Following is the example for a start of how it all works.

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>