Flexbox Utilities

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more.

Bootstrap provides powerful, pre-built components and utilities.

Example

<div class="d-flex p-2 bd-highlight bg-light mb-3">
  <div class="p-2 border">Flex item 1</div>
  <div class="p-2 border">Flex item 2</div>
</div>
<div class="d-flex justify-content-center bg-light mb-3">
  <div class="p-2 border">Centered flex item</div>
</div>
<div class="d-flex align-items-center bg-light" style="height: 100px;">
  <div class="p-2 border">Vertically centered flex item</div>
</div>

Experiment with the code above in the Playground!