Horizontal Column Alignment


In Bootstrap 5, you can align columns horizontally within a row using alignment classes. Bootstrap provides classes that allow you to control the horizontal alignment of columns within a row. Here are some of the most commonly used column horizontal alignment classes:

  • justify-content-start class is used to align columns from start.
  • justify-content-center class is used to align columns from the center.
  • justify-content-end class is used to align columns in the end.
  • justify-content-around class is used to make spacing between the columns and on the outer sides of the row.
  • justify-content-between class is used to add space between the columns elements.
  • justify-content-evenly class is used to make equal spacing between columns.
Example 
<div class="container">
 <h5 class="mt-3">Align Columns at Start</h5>
 <div class="row justify-content-start bg-secondary " style="min-height: 150px;">
  <div class="col-3 bg-warning">
    Column1
  </div>
  <div class="col-3 bg-info ">
    Column2
  </div>
 </div>
 <h5 class="mt-3">Align Columns at Center</h5>
 <div class="row  justify-content-center bg-secondary " style="min-height: 150px;">
  <div class="col-3 bg-warning">
     Column1
  </div>
  <div class="col-3 bg-info ">
     Column2
  </div>
 </div>
 <h5 class="mt-3">Align Columns at End</h5>
 <div class="row justify-content-end bg-secondary " style="min-height: 150px;">
  <div class="col-3 bg-warning">
    Column1
  </div>
  <div class="col-3 bg-info ">
     Column2
  </div>
 </div>
 <h5 class="mt-3">Align Columns with Between</h5>
 <div class="row justify-content-between bg-secondary " style="min-height: 150px;">
  <div class="col-3 bg-warning">
    Column1
  </div>
  <div class="col-3 bg-info ">
     Column2
  </div>
 </div>     
 <h5 class="mt-3">Align Columns with Around</h5>
 <div class="row justify-content-around bg-secondary " style="min-height: 150px;">
  <div class="col-3 bg-warning">
    Column1
  </div>
  <div class="col-3 bg-info ">
     Column2
  </div>
 </div>    
 <h5 class="mt-3">Align Columns with Evenly</h5>
 <div class="row justify-content-evenly bg-secondary " style="min-height: 150px;">
  <div class="col-3 bg-warning">
    Column1
  </div>
  <div class="col-3 bg-info ">
     Column2
  </div>
 </div>          
</div>
Try it Yourself

Output: