• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Flex

← Previous

Bootstrap 4 provides a powerful set of Flexbox utilities that make it easier to create responsive layouts, align items, and control spacing without writing custom CSS. Flexbox simplifies the arrangement of elements in both horizontal and vertical directions and offers dynamic distribution of space. Using Bootstrap’s flex utilities, developers can quickly implement modern, responsive designs while maintaining consistency across the project.

Enabling Flex

To use Flexbox in Bootstrap 4, you simply apply the d-flex class to a container. This transforms the container into a flex container, and its direct children become flex items.

<div class="d-flex">
  <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-warning text-dark">Item 3</div>
</div>

  • d-flex activates the flex layout.

  • Children align horizontally by default.

  • Adding padding and background colors makes it easier to visualize flex items.

Direction Utilities

Flex containers can control the direction of child elements:

  • flex-row – default horizontal layout.

  • flex-row-reverse – horizontal layout in reverse order.

  • flex-column – vertical layout.

  • flex-column-reverse – vertical layout in reverse order.

<div class="d-flex flex-column">
  <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-warning text-dark">Item 3</div>
</div>

  • Direction utilities help create both horizontal navigation bars and vertical stacks of elements.

  • Reverse utilities are useful for responsive designs where the order of content changes on smaller screens.

Justify Content

Flex utilities allow precise horizontal alignment of items within a container:

  • justify-content-start – aligns items to the left.

  • justify-content-end – aligns items to the right.

  • justify-content-center – centers items horizontally.

  • justify-content-between – distributes items evenly, first at start and last at end.

  • justify-content-around – distributes items with equal space around each item.

<div class="d-flex justify-content-between">
  <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-warning text-dark">Item 3</div>
</div>

  • Justification ensures consistent spacing and alignment, especially in navigation bars, toolbars, and card layouts.

Align Items

Vertical alignment of flex items is controlled by align-items classes:

  • align-items-start – aligns items to the top.

  • align-items-end – aligns items to the bottom.

  • align-items-center – centers items vertically.

  • align-items-baseline – aligns items along their baseline.

  • align-items-stretch – stretches items to fill the container height.

<div class="d-flex align-items-center" style="height:150px;">
  <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-warning text-dark">Item 3</div>
</div>

  • Vertical alignment is particularly useful in cards, buttons, and toolbars.

Align Self

Individual flex items can override the container’s alignment using align-self classes:

  • align-self-start

  • align-self-end

  • align-self-center

  • align-self-baseline

  • align-self-stretch

<div class="d-flex align-items-start" style="height:150px;">
  <div class="p-2 bg-primary text-white align-self-center">Item 1</div>
  <div class="p-2 bg-success text-white">Item 2</div>
  <div class="p-2 bg-warning text-dark align-self-end">Item 3</div>
</div>

  • This allows selective vertical alignment for certain items while others follow the container’s alignment.

Flex Wrap

By default, flex items do not wrap. Bootstrap 4 utilities allow items to wrap onto multiple lines:

  • flex-nowrap – no wrapping (default).

  • flex-wrap – allows wrapping.

  • flex-wrap-reverse – wraps in reverse order.

<div class="d-flex flex-wrap">
  <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-warning text-dark">Item 3</div>
  <div class="p-2 bg-info text-white">Item 4</div>
</div>

  • Wrapping is useful for responsive layouts where content should flow to a new line on smaller screens.

Order

Flex items can change their visual order without altering the HTML:

  • order-0, order-1, order-2, … order-12 – control the order of items.

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

  • Changing order is useful for responsive designs, for example moving a sidebar below content on smaller screens.

Flex Grow, Shrink, and Basis

Bootstrap 4 provides classes to control how items grow or shrink:

  • flex-grow-0, flex-grow-1 – control expansion of items.

  • flex-shrink-0, flex-shrink-1 – control shrinking when space is limited.

  • flex-fill – fills remaining space.

<div class="d-flex">
  <div class="p-2 bg-primary text-white flex-fill">Flexible Item</div>
  <div class="p-2 bg-success text-white">Fixed Item</div>
</div>

  • These utilities are essential for creating dynamic layouts and responsive designs.

Summary of the Tutorial

This tutorial covered Bootstrap 4 Flex utilities. You learned:

  • Enabling flex layout using d-flex.

  • Controlling direction with flex-row, flex-column, and reverse classes.

  • Justifying content horizontally with justify-content-* classes.

  • Aligning items vertically using align-items-* and overriding with align-self-*.

  • Controlling wrapping with flex-wrap and flex-wrap-reverse.

  • Adjusting visual order using order-* classes.

  • Managing growth, shrinkage, and filling space with flex-grow-*, flex-shrink-*, and flex-fill.

  • Applying these utilities to create responsive, modern layouts without custom CSS.

Bootstrap 4 Flex utilities offer powerful tools to create flexible, responsive, and clean designs efficiently. When combined with other utility classes, they allow developers to build complex layouts with minimal CSS and maximum maintainability.

Practice Questions

  1. Create a horizontal flex container with three items spaced evenly using justify-content-between.

  2. Build a vertical flex container with items stacked in reverse order using flex-column-reverse.

  3. Create a flex container where items are centered both horizontally and vertically.

  4. Build a flex container with wrapping enabled and add six items so they wrap to the next line on smaller screens.

  5. Create a flex container with three items and set different orders to change their visual sequence.

  6. Build a flex container with one item using flex-fill so it expands while others remain fixed.

  7. Create a flex container where the first item is aligned to the top and the second item is aligned to the bottom using align-self-* classes.

  8. Build a flex container with items spaced evenly around using justify-content-around.

  9. Create a flex container with items that do not wrap and overflow the container on small screens.

  10. Build a responsive flex container where items stack vertically on small screens and display in a row on medium and larger screens.

← Previous

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top