Bootstrap 4 Flexbox Utilities

Welcome to The Coding College! Bootstrap 4 is built with Flexbox, providing developers with powerful tools to create responsive, dynamic layouts effortlessly. This guide will help you master the Bootstrap 4 Flex utilities, showing you how to align, distribute, and organize elements efficiently.

What is Flexbox?

Flexbox is a CSS layout model that makes it easy to design flexible and responsive layouts. With Flexbox, you can align items both horizontally and vertically, reorder elements, and distribute space dynamically.

Bootstrap 4 incorporates Flexbox into its grid system and provides numerous utilities to simplify layout creation.

Flexbox Utilities in Bootstrap 4

1. Enable Flexbox

Use the .d-flex class to make an element a flex container.

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

You can also use .d-inline-flex for inline-level flex containers.

2. Direction Utilities

Control the direction of flex items with these classes:

  • .flex-row (default): Items arranged in a row (left to right).
  • .flex-row-reverse: Items arranged in a row (right to left).
  • .flex-column: Items arranged in a column (top to bottom).
  • .flex-column-reverse: Items arranged in a column (bottom to top).

Example: Flex Direction

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

3. Justify Content Utilities

Distribute flex items along the main axis:

  • .justify-content-start (default): Align items to the start.
  • .justify-content-end: Align items to the end.
  • .justify-content-center: Center items.
  • .justify-content-between: Distribute items with space between them.
  • .justify-content-around: Distribute items with equal space around them.
  • .justify-content-evenly: Distribute items with equal space between and around them.

Example: Justify Content

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

4. Align Items Utilities

Align flex items along the cross axis:

  • .align-items-start: Align items to the start.
  • .align-items-end: Align items to the end.
  • .align-items-center: Center items.
  • .align-items-baseline: Align items along their text baselines.
  • .align-items-stretch (default): Stretch items to fill the container.

Example: Align Items

<div class="d-flex align-items-center" style="height: 200px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

5. Align Self Utilities

Align individual items independently of the group:

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch (default)

Example: Align Self

<div class="d-flex" style="height: 200px;">
  <div class="align-self-start">Item 1</div>
  <div class="align-self-center">Item 2</div>
  <div class="align-self-end">Item 3</div>
</div>

6. Flex Wrap Utilities

Control whether flex items wrap to the next line:

  • .flex-wrap (default): Wrap items onto multiple lines.
  • .flex-nowrap: Prevent items from wrapping.
  • .flex-wrap-reverse: Wrap items onto multiple lines in reverse order.

Example: Flex Wrap

<div class="d-flex flex-wrap">
  <div style="width: 100px;">Item 1</div>
  <div style="width: 100px;">Item 2</div>
  <div style="width: 100px;">Item 3</div>
  <div style="width: 100px;">Item 4</div>
</div>

7. Flex Grow and Shrink Utilities

Control how flex items grow or shrink to fill space:

  • .flex-grow-0: Prevent an item from growing.
  • .flex-grow-1: Allow an item to grow.
  • .flex-shrink-0: Prevent an item from shrinking.
  • .flex-shrink-1: Allow an item to shrink.

Example: Flex Grow

<div class="d-flex">
  <div class="flex-grow-1 bg-primary text-white">Item 1</div>
  <div class="bg-secondary text-white">Item 2</div>
</div>

8. Order Utilities

Change the order of items with .order-* classes:

  • .order-0 (default): Default order.
  • .order-1, .order-2, …, .order-12: Positive order values.
  • .order-first: Move to the beginning.
  • .order-last: Move to the end.

Example: Flex Order

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

9. Responsive Flexbox Utilities

Bootstrap 4 provides responsive classes to adapt layouts at different breakpoints:

  • .d-sm-flex, .d-md-flex, .d-lg-flex, .d-xl-flex: Enable flex only on specific breakpoints.
  • Responsive versions for all utilities (e.g., .flex-md-row, .justify-content-lg-center).

Example: Responsive Flex

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

Combining Flex Utilities

You can combine multiple flex utilities to create sophisticated layouts quickly.

Example: Flexbox Navigation Bar

<div class="d-flex justify-content-between align-items-center bg-light p-3">
  <div>Logo</div>
  <div class="d-flex">
    <a href="#" class="mx-2">Home</a>
    <a href="#" class="mx-2">About</a>
    <a href="#" class="mx-2">Contact</a>
  </div>
</div>

Tips for Using Bootstrap 4 Flex Utilities

  1. Plan Your Layout: Break down your design into sections and decide which flex utilities you need.
  2. Use Responsive Classes: Adapt your layout for different screen sizes with responsive utilities.
  3. Combine with Spacing Utilities: Add margins and paddings to perfect your design.

Conclusion

Bootstrap 4 Flex utilities make it incredibly easy to create responsive, modern layouts without writing complex CSS. With just a few classes, you can align, order, and space elements dynamically.

Leave a Comment