Hackforge Academy

Explanation

Bootstrap Flexbox Utilities provide utility classes for building flexible and responsive layouts without writing custom CSS. These classes are based on the CSS Flexbox model and allow developers to align, distribute, and reorder elements efficiently.

Code:

<div class="d-flex">
  <div class="p-3 border">Item 1</div>
  <div class="p-3 border">Item 2</div>
  <div class="p-3 border">Item 3</div>
</div>

Explanation

Bootstrap offers several flex direction classes to control the arrangement of items. Use `flex-row` for horizontal layouts, `flex-column` for vertical layouts, and responsive variants such as `flex-md-row` or `flex-lg-column` to change the layout at different screen sizes.

Code:

<div class="d-flex flex-column flex-md-row gap-3">
  <div class="p-3 bg-primary text-white">Box 1</div>
  <div class="p-3 bg-success text-white">Box 2</div>
  <div class="p-3 bg-warning">Box 3</div>
</div>

Explanation

Alignment utilities help position flex items horizontally and vertically. Classes like `justify-explanation-*` control horizontal alignment, while `align-items-*` manage vertical alignment within the flex container.

Code:

<div class="d-flex justify-explanation-between align-items-center border p-3" style="height:150px;">
  <div class="bg-info p-3">Left</div>
  <div class="bg-secondary text-white p-3">Center</div>
  <div class="bg-success text-white p-3">Right</div>
</div>

Explanation

Bootstrap provides wrapping and spacing utilities for flex containers. The `flex-wrap` class allows items to move to the next line when necessary, while the `gap-*` classes add consistent spacing between flex items without using margins.

Code:

<div class="d-flex flex-wrap gap-2">
  <div class="p-3 border">Item 1</div>
  <div class="p-3 border">Item 2</div>
  <div class="p-3 border">Item 3</div>
  <div class="p-3 border">Item 4</div>
  <div class="p-3 border">Item 5</div>
</div>

Explanation

Flexbox utilities also support ordering, growing, shrinking, and automatic margins. These features are useful for creating responsive navigation bars, dashboards, pricing cards, and modern web layouts with minimal custom CSS.

Code:

<div class="d-flex align-items-center border p-3">
  <div class="order-2 p-2 bg-warning">Second</div>
  <div class="order-1 p-2 bg-primary text-white">First</div>
  <div class="ms-auto">
    <button class="btn btn-success">Login</button>
  </div>
</div>