d-flex

Applies display: flex. Combine with justify-content-*, align-items-*, gap-*, and flex-direction-* utilities.

Syntax

bootstrap

<div class="d-flex justify-content-between align-items-center">

Example

bootstrap

<div class="d-flex justify-content-between align-items-center gap-3">
  <span>Left</span>
  <span>Right</span>
</div>

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