BS5 Flex

Enable flex

<div class="d-flex">...</div>

Direction

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

Responsive direction

<div class="d-flex flex-column flex-md-row gap-3">...</div>

Justify content

justify-content-start
justify-content-center
justify-content-between
justify-content-around
justify-content-evenly

Align items

align-items-start
align-items-center
align-items-end
align-items-stretch

Common pattern: header bar

<div class="d-flex justify-content-between align-items-center">
  <h5 class="mb-0">Title</h5>
  <button class="btn btn-sm btn-outline-primary">Action</button>
</div>

Wrapping

<div class="d-flex flex-wrap gap-2">
  <span class="badge bg-secondary">Tag</span>
  <span class="badge bg-secondary">Tag</span>
</div>

Order

Change visual order without changing HTML structure.

<div class="d-flex">
  <div class="order-2">Second</div>
  <div class="order-1">First</div>
</div>

Auto margins in flex

<div class="d-flex">
  <div>Left</div>
  <div class="ms-auto">Right</div>
</div>

Best practices

• Use flex for one-dimensional layouts (row or column)
• Prefer grid for complex 2D layouts
• Use gap-* instead of manual margins between flex items