Bootstrap 5 Columns Alignment
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
Please Login to comment...