Bootstrap 5 Columns


In Bootstrap 5, columns are an essential part of the grid system that allows developers to create responsive and flexible layouts for web pages or applications. Columns are used to divide the width of a container into equal or varying parts, which can be used to arrange content in a structured manner. The flexbox grid system allows you to modify columns with various alignment, ordering, and offsetting options. Using column classes, you can control the widths of non-grid items.

Alignment

In bootstrap5 we can align columns in two ways using flexbox alignment utilities.

  • Vertical Alignment
  • Horizontal Alignment

Vertical Alignment

Bootstrap5 provides utility classes for vertical alignment. You can apply these classes to elements to control their vertical alignment within a container. Here are some of the utility classes:

  • align-items-start align the content vertically at starting position.
  • align-items-center align the content vertically at center position.
  • align-items-end align the content vertically at end position.
Example 
<div class="container">
 <h5 class="mt-3">Align content at Start</h5>
  <div class="row align-items-start bg-secondary " style="min-height: 150px;">
   <div class="col bg-warning">
    Column1
   </div>
   <div class="col bg-info ">
    Column2
   </div>
   <div class="col bg-warning">
    Column3
   </div>
  </div>
 <h5 class="mt-3">Align content at Center</h5>
  <div class="row align-items-center bg-secondary " style="min-height: 150px;">
   <div class="col bg-warning">
    Column1
   </div>
   <div class="col bg-info ">
    Column2
   </div>
   <div class="col bg-warning">
    Column3
   </div>
  </div>
 <h5 class="mt-3">Align content at End</h5>
  <div class="row align-items-end bg-secondary " style="min-height: 150px;">
   <div class="col bg-warning">
    Column1
   </div>
   <div class="col bg-info ">
    Column2
   </div>
   <div class="col bg-warning">
    Column3
   </div>
  </div>
</div>
Try it Yourself

Output:


Align Using Self

Adjust the alignment of each column separately using .align-self-* classes.

Example 
<div class="container">
  <div class="row bg-secondary " style="min-height: 150px;">
   <div class="col align-self-start bg-warning">
    Column1
   </div>
   <div class="col align-self-center bg-info ">
    Column2
   </div>
   <div class="col align-self-end bg-warning">
    Column3
   </div>
  </div>
</div>
Try it Yourself

Output: