Examples of Bootstrap 5 Flex Justify Content
Example 1: In this example, we change the alignment of the elements on the main axis using justify-content-start and justify-content-end classes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container text-center ">
<h1 class="text-success">w3wiki</h1>
<h5>Bootstrap 5 Flex Justify content </h5>
</div>
<div class="d-flex
justify-content-start
flex-row border">
<div class="border p-2 bg-light">
Flex item1
</div>
<div class="border p-2 bg-light">
Flex item2
</div>
<div class="border p-2 bg-light">
Flex item3
</div>
</div>
<div class="d-flex
justify-content-end
flex-row border ">
<div class="border p-2 bg-light">
Flex item1
</div>
<div class="border p-2 bg-light">
Flex item2
</div>
<div class="border p-2 bg-light">
Flex item3
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, we change the alignment of the elements on the main axis using justify-content-center and justify-content-end classes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container text-center ">
<h1 class="text-success">w3wiki</h1>
<h5>Bootstrap 5 Flex Justify content </h5>
</div>
<div class="d-flex
justify-content-center
flex-row border">
<div class="border p-2 bg-light">
Flex item1
</div>
<div class="border p-2 bg-light">
Flex item2
</div>
<div class="border p-2 bg-light">
Flex item3
</div>
</div>
<div class="d-flex
justify-content-between
flex-row border">
<div class="border p-2 bg-light">
Flex item1
</div>
<div class="border p-2 bg-light">
Flex item2
</div>
<div class="border p-2 bg-light">
Flex item3
</div>
</div>
</body>
</html>
Output:
Bootstrap 5 Flex Justify Content
Bootstrap 5 Flex Justify Content aligns items along the main axis, distributing space between or around them, facilitating flexible layouts and responsive design with various alignment options.
Bootstrap 5 Flex Justify Content Classes:
Class | Description |
---|---|
justify-content-start | Aligns items to the start of the main axis for all screen sizes. |
justify-content-end | Aligns items to the end of the main axis for all screen sizes. |
justify-content-center | Aligns items to the center of the main axis for all screen sizes. |
justify-content-between | Aligns items between the start and end of the main axis for all screen sizes. |
justify-content-around | Aligns items evenly spaced around the main axis for all screen sizes. |
justify-content-evenly | Aligns items evenly on the main axis for all screen sizes. |
Syntax: The * can be replaceable with start, end, center, between, around and evenly.
<div class="d-flex justify-content-*">
...
</div>