Bootstrap 5 Columns Horizontal Alignment

Bootstrap5 Columns Horizontal alignment is used to align the columns horizontally so that we can define how the columns will be displayed in a single line.

Column Horizontal Alignment classes used: 

• justify-content-start: This class is used to align columns from start.
• justify-content-center: This class is used to align columns from the center.
• justify-content-end:  This class is used to align columns in the end.
• justify-content-around: This class is used to make equal spacing between 2 columns.
• justify-content-between: This class is used to add space between the columns elements.
• justify-content-evenly: This class is used to make equal spacing between right and left of 2 columns.

Syntax:

<div class="row justify-content-*">
 <div class="col-4">
 ...
 </div>
 <div class="col-4">
 ...
 </div>
</div>

 

Example 1: In this example, we will learn about horizontal alignment from start and center.

Output

👁 Image

Example 2: In this example, we will learn about horizontal alignment from the end and even alignment.

Output

👁 Image

Reference: https://getbootstrap.com/docs/5.0/layout/columns/#horizontal-alignment