Bootstrap 5 Columns Alignment

Last Updated : 23 Jul, 2025

In bootstrap 5, we can use flexbox alignment utilities to align our columns horizontally and vertically without using CSS. The following are the possible alignment ways:

  • Vertical alignment: For aligning the column vertically we use the flexbox utilities to get desired alignment system.
  • Horizontal alignment: For aligning the column Horizontally we use the flexbox utilities to get desired alignment system.
  • Column wrapping: In column wrapping, If extra than 12 columns are placed within a single row, every institution of more columns will, as one unit, wrap onto a brand new line.
  • Column breaks: In column break, for breaking a column to a new line in flexbox add an element with a width of 100% wherever you want to wrap your columns to a new line.

Example 1: Here is an example of vertical alignment.

HTML 
<!DOCTYPE html>
<html>

<head>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" 
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" 
          crossorigin="anonymous">

    <style>
        .container{
           height: 90px;
                }
    </style>
</head>

<body>
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h3>Bootstrap5 Columns Alignment</h3>
    <br>
    <section class="d-flex flex-column container">
        <section class="row align-items-start border">
            <section class="col">
                GFG column align in start
            </section>
        </section>
        <section class="row align-items-center border">
            <section class="col">
                GFG column align in center
            </section>
        </section>
        <section class="row align-items-end border">
            <section class="col">
                GFG column align in end
            </section>
        </section>
    </section>
</body>

</html>

Output:

 

Example 2: Here is an example of a column break.

HTML 
<!DOCTYPE html>
<html>

<head>
    <!-- Load Bootstrap -->
    <link href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        rel="stylesheet" 
        crossorigin="anonymous">
   
</head>

<body>
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h3>Bootstrap5 Columns Alignment</h3>
    <br>
    <section class="container">
        <section class="row">
            <section class="col-3 border">GFG</section>
            <section class="col-3 border">GFG</section>

            <!-- we add width:100% in columns to break to new line -->
            <section class="w-100"></section>

            <section class="col-3 border">GFG</section>
            <section class="col-3 border">GFG</section>
            <section class="col-3 border">GFG</section>
        </section>
    </section>

</body>

</html>

Output:

 

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

Comment

Explore