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 >
< 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 >
< 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 >
< 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
Share your thoughts in the comments
Please Login to comment...