Bootstrap Flex

Overview

Flex utilities provide a complete set of flexbox layout tools.

Basic Flex

<div class="d-flex">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Direction

<!-- Row (default) -->
<div class="d-flex flex-row">...</div>

<!-- Row reverse -->
<div class="d-flex flex-row-reverse">...</div>

<!-- Column -->
<div class="d-flex flex-column">...</div>

<!-- Column reverse -->
<div class="d-flex flex-column-reverse">...</div>

Justify Content

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Align Items

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

Next Steps

Next: Bootstrap Checks & Radios →