BS5 Grid Basic
Bootstrap 5 Grid System
The flexbox-built Bootstrap grid system supports up to 12 columns on a page.
You can arrange the 12 columns together to create bigger columns if you don’t want to utilize them all at once:
The columns in the responsive grid system will dynamically reorganize based on the size of the screen.
Verify that the total equals 12 or less (you don’t have to use all 12 of the available columns).
Grid Classes
- .col- (extra small devices – screen width less than 576px)
- .col-sm- (small devices – screen width equal to or greater than 576px)
- .col-md- (medium devices – screen width equal to or greater than 768px)
- .col-lg- (large devices – screen width equal to or greater than 992px)
- .col-xl- (xlarge devices – screen width equal to or greater than 1200px)
- .col-xxl- (xxlarge devices: those with a screen width of at least 1400 pixels)
Basic Structure of a Bootstrap 5 Grid
The fundamental layout of a Bootstrap 5 grid is as follows:
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
First example: create a row (<div class=”row”>). The desired number of columns (tags with relevant data) should then be added .col-*-* classes. The responsiveness is indicated by the first star (*), which can be either sm, md, lg, xl, or xxl. The second star denotes a number that should add up to 12 for every row.
Second example: let bootstrap handle the layout to produce equal width columns instead of assigning a number to each col. Two “col” elements equal 50% of each col’s width, while three cols equal 33.33% of each col’s width. Wideth = 25% for four cols, etc. .col-sm|md|lg|xl|xxl is another option for making the columns responsive.
Here is a collection of some basic Bootstrap 5 grid layout examples.
Three Equal Columns
The example that follows demonstrates how to make three columns of identical width for all devices and screen widths:
Example
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Responsive Columns
Four equal-width columns can be created, starting with tablets and scaling to extra-large desktops, as demonstrated in the example below. In mobile devices or screens with a width of less than 576 pixels, the columns will automatically arrange themselves one above the other:
Example
<div class="row">
<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>
</div>
Two Unequal Responsive Columns
The example below demonstrates how to achieve two columns of varying widths that begin at tablets and expand to huge additional desktops:
Example
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
