Bootstrap 5 Flex Auto margins with align-items
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 > < 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 > < div class = "container text-center" > < h1 class = "text-success" > w3wiki </ 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" >Beginner Item</ div > < div class = "mb-auto p-3 bg-danger" >Beginner Item</ div > < div class = "p-3 bg-danger" >Beginner 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 > < 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 > < div class = "container text-center" > < h1 class = "text-success" > w3wiki </ 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" >Beginner Item</ div > < div class = "p-3 bg-danger" >Beginner Item</ div > < div class = "mb-auto p-3 bg-danger" >Beginner Item</ div > </ div > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/utilities/flex/#with-align-items