Bootstrap - Flex

Flex Container Properties

Bootstrap provides CSS classes for creating flexible layouts using the CSS Flex system. The flex container is the main component of a flex layout, and it has properties that control how its child elements (flex items) are positioned and sized.

To set an element as a flex container, apply the d-flex class to it. This establishes a flex context for all its immediate children.

<div class="d-flex">
  <!-- Flex items go here -->
</div>

The flex-direction property sets the direction of the main axis and the order in which flex items are placed in the container. Bootstrap provides classes like flex-row (default), flex-row-reverse, flex-column, and flex-column-reverse to set the flex direction.

The flex-wrap property controls whether flex items are forced onto a single line or can wrap onto multiple lines. Bootstrap offers classes such as flex-nowrap (default), flex-wrap, and flex-wrap-reverse to manage flex wrapping behavior.

To control the alignment of flex items along the main axis, use the justify-content property. Bootstrap provides classes like justify-content-start (default), justify-content-end, justify-content-center, justify-content-between, and justify-content-around to distribute the available space between flex items.

The align-items property defines how flex items are aligned along the cross axis. Bootstrap offers classes such as align-items-start, align-items-end, align-items-center, align-items-baseline, and align-items-stretch (default) to control the vertical alignment of flex items within a container.

The align-content property sets the spacing and alignment of flex lines when there is extra space in the cross axis. Bootstrap provides classes like align-content-start, align-content-end, align-content-center, align-content-between, align-content-around, and align-content-stretch (default) to manage the distribution of space between and around flex lines.

By combining these flex container properties, you can create many flexible layouts in Bootstrap. The flex container acts as the foundation for positioning and sizing its child elements, allowing you to build responsive and dynamic layouts.

Flex Item Properties

Bootstrap provides classes for controlling the behavior of flex items within the container.

The order property changes the order in which flex items appear within the container. Bootstrap provides classes like order-0, order-1, order-2, and so on, to set the order of flex items. You can also use order-first and order-last to place an item at the beginning or end of the container.

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

The flex-grow property determines how much a flex item can grow relative to the other items in the container when there is extra space available. Bootstrap offers classes such as flex-grow-0 (default) and flex-grow-1 to control the growth factor of flex items.

<div class="d-flex">
  <div class="flex-grow-1">Flex item that grows</div>
  <div class="flex-grow-0">Flex item that doesn't grow</div>
</div>

The flex-shrink property sets how much a flex item can shrink relative to the other items in the container when there is not enough space. Bootstrap provides classes like flex-shrink-0 and flex-shrink-1 (default) to manage the shrink factor of flex items.

The flex-basis property specifies the initial size of a flex item before any remaining space is distributed. Bootstrap offers classes such as flex-basis-auto (default), flex-basis-0, and sizing classes like flex-basis-25, flex-basis-50, flex-basis-75, and flex-basis-100 to set the initial size of flex items.

<div class="d-flex">
  <div class="flex-basis-25">25% width</div>
  <div class="flex-basis-50">50% width</div>
  <div class="flex-basis-25">25% width</div>
</div>

The align-self property allows you to override the default alignment of an individual flex item set by the align-items property on the flex container. Bootstrap provides classes like align-self-start, align-self-end, align-self-center, align-self-baseline, and align-self-stretch (default) to control the alignment of individual flex items along the cross axis.

<div class="d-flex align-items-start" style="height: 100px;">
  <div class="align-self-start">Aligned flex item</div>
  <div class="align-self-center">Centered flex item</div>
  <div class="align-self-end">Bottom-aligned flex item</div>
  <div class="align-self-baseline">Baseline-aligned flex item</div>
  <div class="align-self-stretch">Stretched flex item</div>
</div>

By using these flex item properties, you can adjust the layout and behavior of flex items within a flex container. You can change the order of items, control their growth and shrink factors, set their initial sizes, and override their alignment.

Responsive Flex Layouts

Bootstrap's flex classes can be combined with responsive classes to create flexible layouts that adapt to different screen sizes. This allows you to change the behavior and appearance of flex items based on the viewport width.

Bootstrap provides responsive classes for flex containers and items, such as d-flex, d-sm-flex, d-md-flex, d-lg-flex, and d-xl-flex. These classes enable you to apply flex properties at specific breakpoints.

<div class="d-flex d-md-block">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

You can also change flex item properties based on screen size. Bootstrap provides responsive classes for properties like order, align-self, and flex-grow.

<div class="d-flex">
  <div class="order-3 order-md-1">Flex item 1</div>
  <div class="order-2 order-md-3">Flex item 2</div>
  <div class="order-1 order-md-2">Flex item 3</div>
</div>

Responsive flex classes are useful when creating responsive navigation menus. You can use flex classes to create a horizontal navigation menu on larger screens and switch to a vertical menu on smaller screens.

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Flex Utilities

Bootstrap has utility classes that let you quickly apply flex properties to elements without writing custom CSS. These utility classes cover flex layout aspects, including order, alignment, size, and spacing.

Flex order utilities help you change the order of flex items in a container. Bootstrap has classes like order-0, order-1, order-2, up to order-12. You can also use order-first and order-last to place an item at the start or end of the container.

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

Flex alignment utilities let you control the alignment of flex items along the main and cross axes. For the main axis, you can use classes like justify-content-start, justify-content-end, justify-content-center, justify-content-between, and justify-content-around. For the cross axis, you can use classes like align-items-start, align-items-end, align-items-center, align-items-baseline, and align-items-stretch.

<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
  <div>Centered flex item</div>
</div>

Flex sizing utilities help you set the size of flex items. Bootstrap has classes like flex-fill to make an item grow and fill the available space, flex-grow-0 and flex-grow-1 to control the growth factor, and flex-shrink-0 and flex-shrink-1 to manage the shrink factor. You can also use sizing classes like flex-basis-25, flex-basis-50, flex-basis-75, and flex-basis-100 to set the initial size of flex items.

<div class="d-flex">
  <div class="flex-grow-1">Growing flex item</div>
  <div class="flex-shrink-0" style="width: 100px;">Fixed-width flex item</div>
</div>

Flex spacing utilities let you add spacing between flex items. Bootstrap has classes like mr-auto and ml-auto to push flex items to the right or left by filling the remaining space. You can also use margin utilities like m-1, m-2, m-3, and so on, to add spacing around flex items.

<div class="d-flex">
  <div>Flex item 1</div>
  <div class="mr-auto">Flex item 2</div>
  <div>Flex item 3</div>
</div>

By using these flex utility classes, you can quickly apply flex properties to elements without writing custom CSS. These utilities give you a way to control the layout, alignment, size, and spacing of flex items in a container.