Bootstrap 5 Flex Align Content
Bootstrap 5 Flex Align Content provides utilities for aligning flex items along the cross-axis. Options include start, end, center, around, and stretch, accommodating various layout requirements across different screen sizes.
Bootstrap 5 Flex Align Content Classes:
Class | Description |
---|---|
align-content-start | Aligns content to the start of the cross-axis for all screen sizes. |
align-content-end | Aligns content to the end of the cross-axis for all screen sizes. |
align-content-center | Aligns content to the center of the cross-axis for all screen sizes. |
align-content-around | Aligns content around the cross-axis for all screen sizes. |
align-content-stretch | Aligns content to stretch across the cross-axis for all screen sizes. |
Syntax:
<div class="d-flex flex-wrap align-content-*">
...
</div>
Example 1: In this example, we align the content to the start and the center of the cross-axis using align content 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 Align content</h5>
</div>
<div class="d-flex
flex-column
bd-highlight
mb-3
flex-wrap
align-content-start">
<div class="border p-2 bd-highlight">
Flex item 1 Hello Beginner wellcome
</div>
<div class="border p-2 bd-highlight">
Flex item 2 Hello Beginner wellcome
</div>
<div class="border p-2 bd-highlight">
Flex item 3 Hello Beginner wellcome
</div>
</div>
<div class="d-flex
flex-column
bd-highlight
mb-3
flex-wrap
align-content-center">
<div class="border p-2 bd-highlight">
Flex item 1 Hello Beginner wellcome
</div>
<div class="border p-2 bd-highlight">
Flex item 2 Hello Beginner wellcome
</div>
<div class="border p-2 bd-highlight">
Flex item 3 Hello Beginner wellcome
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, we align the content to the around and the end of the cross axis using align content 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 Align content</h5>
</div>
<div class="d-flex
flex-column
bd-highlight
mb-3
flex-wrap
align-content-around">
<div class="border p-2 bd-highlight">
Flex item 1 Hello Beginner wellcome
</div>
<div class="border p-2 bd-highlight">
Flex item 2 Hello Beginner wellcome
</div>
<div class="border p-2 bd-highlight">
Flex item 3 Hello Beginner wellcome
</div>
</div>
<div class="d-flex
flex-column
bd-highlight
mb-3
flex-wrap
align-content-end">
<div class="border p-2 bd-highlight">
Flex item 1 Hello Beginner wellcome
</div>
<div class="border p-2 bd-highlight">
Flex item 2 Hello Beginner wellcome
</div>
<div class="border p-2 bd-highlight">
Flex item 3 Hello Beginner wellcome
</div>
</div>
</body>
</html>
Output:
Contact Us