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