MENU
Flex
To get and style a flexbox (4.7.5), use:
.d[-sm | -md | -lg | -xl | -xxl]-[inline-]flex
.flex[-sm | -md | -lg | -xl | -xxl]-{row | column}[-reverse]
.justify-content[-sm | -md | -lg | -xl | -xxl]-{start | end | center | between | around | evenly }
.align-content[-sm | -md | -lg | -xl | -xxl]-{start | end | center | around | stretch }
.align-{items | self}[-sm | -md | -lg | -xl | -xxl]-{start | end | center | baseline | stretch}
.flex[-sm | -md | -lg | -xl | -xxl]-fill
.flex[-sm | -md | -lg | -xl | -xxl]-{grow | shrink}-{0 | 1}
.flex[-sm | -md | -lg | -xl | -xxl]-{wrap | nowrap | wrap-reverse}
.order[-sm | -md | -lg | -xl | -xxl]-{0 | 1 | 2 | 3 | 4 | 5 | first | last}
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
<style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>
<div class="d-flex justify-content-start"><div>1</div><div>2</div><div>3</div></div>
<div class="d-flex justify-content-end"><div>1</div><div>2</div><div>3</div></div>
<div class="d-flex justify-content-center"><div>1</div><div>2</div><div>3</div></div>
<div class="d-flex justify-content-between"><div>1</div><div>2</div><div>3</div></div>
<div class="d-flex justify-content-around"><div>1</div><div>2</div><div>3</div></div>
<div class="d-flex justify-content-evenly"><div>1</div><div>2</div><div>3</div></div>
</body><html>RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
<style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>
<div style="height:100px" class="d-flex align-items-start"><div>1</div><div>2</div><div>3</div></div>
<div style="height:100px" class="d-flex align-items-end"><div>1</div><div>2</div><div>3</div></div>
<div style="height:100px" class="d-flex align-items-center"><div>1</div><div>2</div><div>3</div></div>
<div style="height:100px" class="d-flex align-items-baseline"><div>1</div><div>2</div><div>3</div></div>
<div style="height:100px" class="d-flex align-items-stretch"><div>1</div><div>2</div><div>3</div></div>
</body><html>RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
<style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
<div class="mb-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>
</body><html>RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
<style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>
<div class="d-flex align-content-around flex-wrap">
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
</div>
</body><html>