Bootstrap - Flex Utility Classes Part 1: Enabling Flex with d-flex

What It Does

To activate flexbox behavior on an element, apply the d-flex class. This sets display: flex, turning the container into a flex parent.

Example 1: Basic Flex Container

<div class="d-flex">

  <div class="p-2 bg-primary text-white">Item 1</div>

  <div class="p-2 bg-secondary text-white">Item 2</div>

  <div class="p-2 bg-success text-white">Item 3</div>

</div>

Explanation:

The d-flex class makes the container a flex container. Its children now become flex items, arranged in a row by default.

Example 2: Flex Direction Column

<div class="d-flex flex-column">

  <div class="p-2 bg-warning">Column 1</div>

  <div class="p-2 bg-info">Column 2</div>

</div>

Explanation:

Adding flex-column changes the main axis to vertical. Items stack on top of each other.