Bootstrap 5 Columns

Bootstrap 5 Columns facilitates the different option for the alignment, ordering, and offsetting of the Columns with the help of flexbox grid system. The different available column classes can be utilized to manage widths of non-grid elements.

Bootstrap 5 Columns: The following components is used that helps to align the columns vertically and horizontally, along with reordering them, which are described below:

• Alignment: It utilizes flexbox alignment to order items either vertically or horizontally. It has 4 ways for alignment:
  • Vertical alignment: It is used to align items vertically.
  • Horizontal alignment: It is used to align items horizontally.
  • Column Wrapping: It is used to wrap overflowed columns into the new line.
  • Column Breaks: It is used to break columns into new line.
• Reordering: It is used to reorder items in a column, based on the bootstrap 5 class given to the HTML elements. It has 2 for reordering:
  • Order Classes: It is used to control the visual order of the content using order class, & are responsive classes.
  • Offsetting Columns: It is used to control the order of the content using the offset grid class.
• Standalone Column Cases: It is utilized to give an element a specific width with no padding, by default.

Syntax:

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

Example 1: In this example, we will assign different widths to columns in a row.

Output:

👁 Image

Example 2: In this example, we will assign different ordering and widths to columns in a row.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/layout/columns/