Bootstrap 5 Flex Auto margins with align-items are used to place the flex items vertically on top or bottom of the container using the Bootstrap classes.
Flex Auto margins with align-items used classes:
- align-items: This class is used to set the alignment of the flex items.
- flex-direction: This class is used to set the direction of flex items in a container.
- margin-top: This class is used to set the margin-top of an item.
- margin-bottom: This class is used to set the margin-bottom of an item.
Syntax:
<div class="d-flex align-items-*">
...
</div>
Example 1: In this example, we will use the align-items-start class to display the flex items.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<title>Bootstrap 5 Flex Auto margins with align-items</title>
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>
Bootstrap 5 Flex Auto margins with align-items
</h2>
<div class="d-flex align-items-start
flex-column bg-success mb-3" style="height: 300px;">
<div class="p-3 bg-danger">Geeks Item</div>
<div class="mb-auto p-3 bg-danger">Geeks Item</div>
<div class="p-3 bg-danger">Geeks Item</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will use the align-items-center class to display the flex items.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<title>Bootstrap 5 Flex Auto margins with align-items</title>
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>
Bootstrap 5 Flex Auto margins with align-items
</h2>
<div class="d-flex align-items-center
flex-column bg-success mb-3" style="height: 300px;">
<div class="p-3 bg-danger">Geeks Item</div>
<div class="p-3 bg-danger">Geeks Item</div>
<div class="mb-auto p-3 bg-danger">Geeks Item</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/utilities/flex/#with-align-items