Auto Margins with align-items
Auto Margin can also be used with the Align Items to vertically move items up or down. The .mb-auto class indicates that margin-bottom is set to auto, while .mt-auto class indicates margin-auto-top.
Example: In this example, we will use .d-flex, .align-items-start, and .align-items-end classes to place the flex items.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Bootstrap 5 Flex Auto Margin with Align Items
</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="text-success text-center">
w3wiki
</h1>
<h2 class="text-center m-3">
Bootstrap 5 Flex Auto Margin with Align Items
</h2>
<div class="d-flex align-items-start flex-column
bg-success m-3 text-white" style="height: 200px;">
<div class="mb-auto p-2 border border-white m-1">
w3wiki
</div>
<div class="p-2 border border-white m-1">
w3wiki
</div>
<div class="p-2 border border-white m-1">
w3wiki
</div>
</div>
<div class="d-flex align-items-end flex-column
bg-success m-3 text-white" style="height: 200px;">
<div class="p-2 border border-white m-1">
w3wiki
</div>
<div class="p-2 border border-white m-1">
w3wiki
</div>
<div class="mt-auto p-2 border border-white m-1">
w3wiki
</div>
</div>
</body>
</html>
Output:
Bootstrap Flex Auto margins
Bootstrap introduces the Flex property for the flexible arrangement of items within containers. This utility provides various properties, including auto-margin, enabling easy manipulation of layouts. With Flex, developers can efficiently modify and organize flex items within containers for enhanced design control.
Flex Auto margins used Classes:
Class | Description |
---|---|
.ms-auto | Adds auto margin to the start (left) of flex items, pushing them towards the right side of the container. |
.me-auto | Sets auto margin to the end (right) of flex items, pushing them towards the left side of the container. |
Syntax:
<div class="d-flex"> <div class="*-auto"> Content... </div> ... </div>
Example 1: In this example, we will use .d-flex and .ms-auto classes to place the flex items.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Flex Auto margins</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel=
"stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="text-success text-center">
w3wiki
</h1>
<h2 class="text-center m-3">
Bootstrap 5 Flex Auto margins
</h2>
<div class="d-flex bg-success m-2 text-white">
<div class="m-1 border border-white">
w3wiki
</div>
<div class="m-1 border border-white">
w3wiki
</div>
<div class="m-1 border border-white">
w3wiki
</div>
</div>
<div class="d-flex bg-success m-2 text-white">
<div class="m-1 border border-white">
w3wiki
</div>
<div class="m-1 border border-white">
w3wiki
</div>
<div class="ms-auto m-1 border border-white">
w3wiki
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, we will use .d-flex and .me-auto classes to place the flex items.
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="text-success text-center">
w3wiki
</h1>
<h2 class="text-center m-3">
Bootstrap 5 Flex Auto margins
</h2>
<div class="d-flex bg-success m-2 text-white">
<div class="m-1 border border-white">
w3wiki
</div>
<div class="m-1 border border-white">
w3wiki
</div>
<div class="m-1 border border-white">
w3wiki
</div>
</div>
<div class="d-flex bg-success m-2 text-white">
<div class="me-auto m-1 border border-white">
w3wiki
</div>
<div class="m-1 border border-white">
w3wiki
</div>
<div class="m-1 border border-white">
w3wiki
</div>
</div>
</body>
</html>
Output: