Bootstrap - Flexbox Utilities

Let’s go through Flexbox Utilities in Bootstrap in a clear and simple way.

What Are Flexbox Utilities?

Flexbox utilities in Bootstrap are a set of built-in CSS helper classes that make it easy to create flexible, responsive layouts without writing custom CSS.

They are based on the CSS Flexbox layout system, which helps you align, arrange, and distribute items inside a container — even when their sizes are unknown or dynamic.

In short:

Flexbox utilities help you easily control the direction, alignment, spacing, and order of elements in Bootstrap.

Why Use Flexbox Utilities?

You don’t need to write your own CSS.
It makes layouts easier to manage.
Works perfectly with responsive breakpoints.
Helps align elements both horizontally and vertically.

How to Use Flexbox Utilities

To use Flexbox in Bootstrap, first make an element a flex container using:

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

Now, all its children become flex items, and you can control their layout using utility classes.

Common Flexbox Utility Classes

Let’s break them down into categories:

1. Display Utilities

These classes make an element a flex container.

Class	Description
`d-flex`	Makes the element a flex container.
`d-inline-flex`	Makes the element an inline flex container.

Example:

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

2. Direction (Flex Direction)

Controls the direction of items inside the flex container.

Class	Description
`flex-row`	Horizontal (left to right) — default
`flex-row-reverse`	Horizontal (right to left)
`flex-column`	Vertical (top to bottom)
`flex-column-reverse`	Vertical (bottom to top)

Example:

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

3. Justify Content (Horizontal Alignment)

Controls how items are aligned horizontally.

Class	Description
`justify-content-start`	Items align to the start (left).
`justify-content-end`	Items align to the end (right).
`justify-content-center`	Items align to the center.
`justify-content-between`	Items spread out with space between them.
`justify-content-around`	Items have space around them.
`justify-content-evenly`	Items have equal spacing between them.

Example:

<div class="d-flex justify-content-between">
  <div>Home</div>
  <div>About</div>
  <div>Contact</div>
</div>

4. Align Items (Vertical Alignment)

Controls how items align vertically in the container.

Class	Description
`align-items-start`	Align items to the top.
`align-items-center`	Align items to the middle.
`align-items-end`	Align items to the bottom.
`align-items-stretch`	Stretch items to fill the container.

Example:

<div class="d-flex align-items-center" style="height:100px;">
  <div>Vertically Centered</div>
</div>

5. Align Self (Individual Item Alignment)

Allows a single item to override the container’s vertical alignment.

Class	Description
`align-self-start`	Aligns the item to the top.
`align-self-center`	Aligns the item to the middle.
`align-self-end`	Aligns the item to the bottom.

Example:

<div class="d-flex">
  <div class="align-self-end">I’m at the bottom</div>
</div>

6. Flex Wrap

Controls whether items stay on one line or wrap to the next line.

Class	Description
`flex-nowrap`	No wrapping (default).
`flex-wrap`	Wrap items onto multiple lines.
`flex-wrap-reverse`	Wrap items in reverse order.

Example:

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

7. Order

Changes the order of items inside a flex container.

Class	Description
`order-0` to `order-5`	Controls order number (lower comes first).
`order-first`	Forces item to appear first.
`order-last`	Forces item to appear last.

Example:

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

8. Align Content (Multiple Line Alignment)

Used when flex items wrap onto multiple lines.

Class	Description
`align-content-start`	Lines packed at the top.
`align-content-center`	Lines packed in the middle.
`align-content-end`	Lines packed at the bottom.
`align-content-between`	Lines evenly spaced with space between.
`align-content-around`	Lines evenly spaced with space around.

9. Responsive Flex Utilities

All flex utilities can be responsive using breakpoints:

Example:

<div class="d-flex flex-column flex-md-row justify-content-md-between">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Here:

On mobile, items are stacked (flex-column).
On medium and larger screens, they are side by side (flex-md-row).

In Summary

Purpose	Example Classes
Make flex container	`d-flex`, `d-inline-flex`
Direction	`flex-row`, `flex-column`
Horizontal alignment	`justify-content-*`
Vertical alignment	`align-items-`, `align-self-`
Wrapping	`flex-wrap`, `flex-nowrap`
Order	`order-1`, `order-last`
Multi-line alignment	`align-content-*`
Responsive control	Add `-sm`, `-md`, `-lg`, etc.

In Simple Words:

Bootstrap’s Flexbox utilities let you control how elements are arranged and aligned on the page — quickly and easily — without writing any CSS.
They make it simple to build responsive, flexible layouts just by adding short class names.