Utilizor
HomeBootstrap 5 BasicsBS5 Flex

BBS5 Flex

Learn about Bootstrap 5 flexbox utilities.

BS5 Flex

Use .d-flex or .d-inline-flex to create a flex container and transform direct children into flex items.

Flex Direction

Use .flex-row, .flex-row-reverse, .flex-column, .flex-column-reverse.

Justify Content

Use .justify-content-start, .justify-content-end, .justify-content-center, .justify-content-between, .justify-content-around.

Align Items

Use .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, .align-items-stretch.

Examples

Flex Container

html/css

Creating a flexbox.

<div class="d-flex p-2 bg-secondary text-white">I am a flexbox container!</div>

Flex Row

html/css

Items in a row.

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

Justify Content Center

html/css

Centering items.

<div class="d-flex justify-content-center bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

Test Your Knowledge

1. Which class creates a flex container?

2. Which class is used to center items horizontally in a flex container?