Open In App

Bootstrap 5 Columns Alignment

Improve
Improve
Like Article
Like
Save
Share
Report

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=
          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=
        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



Last Updated : 22 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads