Bootstrap 5 Layout Column sizing

Bootstrap 5 Layout Column sizing is used to set the width of the column element. To create equal widths columns, .col within .row classes are used. We can also use the subset of classes to set split the columns unequally.

Layout Column sizing used Classes:

• .row: This class is used to create rows for a layout.
• .col: This class is used to create columns for a layout.
• .col-*: This class is used to set the size of columns of the layout.

Syntax:

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

 

Example 1: In this example, we will create 2 rows and 1 column using .row and .col classes.

Output:

👁 Image

Example 2: In this example, we will create 3 rows and 2 columns using .row, .col, and .col-* classes.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/forms/layout/#column-sizing