Bootstrap 5 Columns Horizontal Alignment
Bootstrap5 Columns Horizontal alignment is used to align the columns horizontally so that we can define how the columns will be displayed in a single line.
Column Horizontal Alignment classes used:
- justify-content-start: This class is used to align columns from start.
- justify-content-center: This class is used to align columns from the center.
- justify-content-end: This class is used to align columns in the end.
- justify-content-around: This class is used to make equal spacing between 2 columns.
- justify-content-between: This class is used to add space between the columns elements.
- justify-content-evenly: This class is used to make equal spacing between right and left of 2 columns.
Syntax:
<div class="row justify-content-*">
<div class="col-4">
...
</div>
<div class="col-4">
...
</div>
</div>
Example 1: In this example, we will learn about horizontal alignment from start and center.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< title >Columns Horizontal alignment</ title >
</ head >
< body >
< div class = "container text-center col-8 " >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >
Bootstrap5 Columns Horizontal alignment
</ h2 >
< div class="row justify-content-start
text-white bg-success">
< div class = "col-2 mt-3" >
Start 1
</ div >
< div class = "col-2 mt-3" >
Start 2
</ div >
< div class = "col-2 mt-3" >
Start 3
</ div >
</ div >
< div class="row justify-content-center
bg-success text-white mt-3">
< div class = "col-2 mt-3" >
Center 1
</ div >
< div class = "col-2 mt-3" >
Center 2
</ div >
< div class = "col-2 mt-3" >
Center 3
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output
Example 2: In this example, we will learn about horizontal alignment from the end and even alignment.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< title >Columns Horizontal alignment</ title >
</ head >
< body >
< div class = " container text-center col-8 " >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >
Bootstrap5 Columns Horizontal alignment
</ h2 >
< div class="row justify-content-end
text-white bg-success">
< div class = "col-2 mt-3" >
End 1
</ div >
< div class = "col-2 mt-3" >
End 2
</ div >
< div class = "col-2 mt-3" >
End 3
</ div >
</ div >
< div class="row justify-content-evenly
bg-success text-white mt-3">
< div class = "col-2 mt-3" >
Even 1
</ div >
< div class = "col-2 mt-3" >
Even 2
</ div >
< div class = "col-2 mt-3" >
Even 3
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output
Reference: https://getbootstrap.com/docs/5.0/layout/columns/#horizontal-alignment
Last Updated :
07 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...