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>
