Flexbox & Utilities

1. Understanding Bootstrap Flexbox

Bootstrap's Flexbox utilities use the d-flex class to enable a flex container, making child elements flexible.

👉 Example: Basic Flexbox Container

<div class="d-flex bg-light p-3">
  <div class="p-2 bg-primary text-white">Item 1</div>
  <div class="p-2 bg-success text-white">Item 2</div>
  <div class="p-2 bg-danger text-white">Item 3</div>
</div>

✅ Explanation:

d-flex makes the container a flexbox.
Each div inside behaves as a flex item.
p-2 adds padding, and bg-* applies different background colors.

2. Controlling Flex Direction

You can change the direction of flex items using:

.flex-row (default) → Items are in a row.
.flex-column → Items are in a column.
.flex-row-reverse → Items are in reverse row order.
.flex-column-reverse → Items are in reverse column order.

👉 Example: Column Layout

<div class="d-flex flex-column bg-light p-3">
  <div class="p-2 bg-primary text-white">Item 1</div>
  <div class="p-2 bg-success text-white">Item 2</div>
  <div class="p-2 bg-danger text-white">Item 3</div>
</div>

3. Aligning Items in Flexbox

You can align items using align-items-*:

.align-items-start → Aligns items to the start.
.align-items-center → Centers items vertically.
.align-items-end → Aligns items to the end.

👉 Example: Center Aligning Items

<div class="d-flex align-items-center bg-light p-3" style="height: 200px;">
  <div class="p-2 bg-primary text-white">Item 1</div>
  <div class="p-2 bg-success text-white">Item 2</div>
</div>

4. Justifying Content in Flexbox

You can control horizontal alignment using justify-content-*:

.justify-content-start → Items start from the left.
.justify-content-center → Items are centered.
.justify-content-end → Items align to the right.
.justify-content-between → Items have space between them.
.justify-content-around → Equal space around items.
.justify-content-evenly → Equal space between and around items.

👉 Example: Centered Items with Space Between

<div class="d-flex justify-content-between bg-light p-3">
  <div class="p-2 bg-primary text-white">Item 1</div>
  <div class="p-2 bg-success text-white">Item 2</div>
  <div class="p-2 bg-danger text-white">Item 3</div>
</div>

5. Controlling Item Growth and Shrink

You can use:

.flex-grow-1 → Item expands to fill available space.
.flex-shrink-0 → Item does not shrink.

👉 Example: Making an Item Grow

<div class="d-flex bg-light p-3">
  <div class="p-2 bg-primary text-white flex-grow-1">Item 1 (Grows)</div>
  <div class="p-2 bg-success text-white">Item 2</div>
</div>

6. Using Flex Wrapping

By default, flex items stay on one line, but you can allow wrapping with:

.flex-wrap → Allows items to wrap to the next line.
.flex-nowrap → Keeps items in a single line.
.flex-wrap-reverse → Wraps items in reverse order.

👉 Example: Wrapped Items

<div class="d-flex flex-wrap bg-light p-3">
  <div class="p-2 bg-primary text-white">Item 1</div>
  <div class="p-2 bg-success text-white">Item 2</div>
  <div class="p-2 bg-danger text-white">Item 3</div>
  <div class="p-2 bg-warning text-dark">Item 4</div>
  <div class="p-2 bg-info text-dark">Item 5</div>
</div>

7. Bootstrap Utility Classes

Bootstrap provides utility classes for common styles like padding, margins, and borders.

Spacing Utilities (Padding & Margins)

p-* → Padding (p-1, p-2, p-3, p-4, p-5)
m-* → Margin (m-1, m-2, m-3, m-4, m-5)

👉 Example: Padding and Margins

<div class="p-3 m-3 bg-primary text-white">Padding & Margin Example</div>

Border Utilities

.border → Adds a border.
.border-0 → Removes the border.
.border-top, .border-bottom, .border-start, .border-end → Adds a border on a specific side.
.rounded → Makes corners rounded.

👉 Example: Border and Rounded Corners

<div class="border rounded p-3 bg-light">Border Example</div>

Text Utilities

.text-start → Left-aligns text.
.text-center → Centers text.
.text-end → Right-aligns text.
.text-uppercase → Converts text to uppercase.
.fw-bold → Makes text bold.

👉 Example: Centered Text

<p class="text-center text-uppercase fw-bold">This is Bootstrap Text</p>

Conclusion

Bootstrap’s Flexbox & Utilities make it easy to create responsive layouts with alignment, spacing, and flexible content positioning. By combining these utilities, you can quickly build adaptive web pages without writing extra CSS. 🚀

BOOTSTRAP