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