Flex Wrap Bootstrap

Bootstrap is a popular CSS framework that is widely used by web developers to create responsive web applications. One of the key features of Bootstrap is its Flexbox layout that uses a flexible box model for building dynamic and responsive user interfaces.

Flexbox is a powerful layout system that enables developers to create flexible and responsive layouts with ease. The Flex Wrap feature allows developers to control the behavior of the flex items when they don't fit in the container.

In this article, we will discuss how to use the Flex Wrap feature in Bootstrap.

What is Flex Wrap?

Flex Wrap is a feature of the Flexbox layout that controls the behavior of the flex items when the container is not wide enough to fit all the items.

By default, the flex items will try to fit in a single row, causing them to shrink or wrap onto the next line if there is not enough space. Flex Wrap allows us to control whether the items should wrap to the next line or continue to shrink and fit onto the same line.

How to Use Flex Wrap in Bootstrap

Bootstrap provides several classes that allow us to control the Flex Wrap behavior of the flex items. These classes can be used with the Flexbox utility classes to create responsive and flexible layouts.

Flex Wrap Classes

flex-wrap

The .flex-wrap class sets the flex-wrap property of the flex container to wrap. This means that the flex items will wrap onto the next line when they don't fit in the container.

<div class="d-flex flex-wrap">
  <div class="flex-item">Flex Item 1</div>
  <div class="flex-item">Flex Item 2</div>
  <div class="flex-item">Flex Item 3</div>
  <div class="flex-item">Flex Item 4</div>
  <div class="flex-item">Flex Item 5</div>
</div>

flex-nowrap

The .flex-nowrap class sets the flex-wrap property of the flex container to nowrap. This means that the flex items will stay on the same line and shrink to fit the container if necessary.

<div class="d-flex flex-nowrap">
  <div class="flex-item">Flex Item 1</div>
  <div class="flex-item">Flex Item 2</div>
  <div class="flex-item">Flex Item 3</div>
  <div class="flex-item">Flex Item 4</div>
  <div class="flex-item">Flex Item 5</div>
</div>

flex-wrap-reverse

The .flex-wrap-reverse class sets the flex-wrap property of the flex container to wrap-reverse. This means that the flex items will wrap onto the next line in reverse order when they don't fit in the container.

<div class="d-flex flex-wrap-reverse">
  <div class="flex-item">Flex Item 1</div>
  <div class="flex-item">Flex Item 2</div>
  <div class="flex-item">Flex Item 3</div>
  <div class="flex-item">Flex Item 4</div>
  <div class="flex-item">Flex Item 5</div>
</div>

Flexbox Utility Classes

Bootstrap also provides several utility classes that can be used with Flex Wrap classes to create responsive and flexible layouts.

justify-content

The .justify-content class specifies how the flex items should be aligned within the container. The available values are:

• .justify-content-start: Align the items at the beginning of the container. This is the default value.
• .justify-content-center: Center the items in the container.
• .justify-content-end: Align the items at the end of the container.
• .justify-content-between: Space the items evenly within the container.
• .justify-content-around: Space the items evenly within the container, with half-size spaces on either end.

<div class="d-flex flex-wrap justify-content-between">
  <div class="flex-item">Flex Item 1</div>
  <div class="flex-item">Flex Item 2</div>
  <div class="flex-item">Flex Item 3</div>
  <div class="flex-item">Flex Item 4</div>
  <div class="flex-item">Flex Item 5</div>
</div>

align-items

The .align-items class specifies how the flex items should be aligned vertically within the container. The available values are:

• .align-items-start: Align the items at the top of the container.
• .align-items-center: Center the items vertically within the container.
• .align-items-end: Align the items at the bottom of the container.

<div class="d-flex flex-wrap align-items-center">
  <div class="flex-item">Flex Item 1</div>
  <div class="flex-item">Flex Item 2</div>
  <div class="flex-item">Flex Item 3</div>
  <div class="flex-item">Flex Item 4</div>
  <div class="flex-item">Flex Item 5</div>
</div>

align-content

The .align-content class specifies how the flex lines should be aligned vertically within the container. The available values are:

• .align-content-start: Align the lines at the top of the container.
• .align-content-center: Center the lines vertically within the container.
• .align-content-end: Align the lines at the bottom of the container.
• .align-content-between: Space the lines evenly within the container.
• .align-content-around: Space the lines evenly within the container, with half-size spaces on either end.

<div class="d-flex flex-wrap align-content-center">
  <div class="flex-item">Flex Item 1</div>
  <div class="flex-item">Flex Item 2</div>
  <div class="flex-item">Flex Item 3</div>
  <div class="flex-item">Flex Item 4</div>
  <div class="flex-item">Flex Item 5</div>
</div>

Conclusion

Flex Wrap is a powerful feature of the Flexbox layout that allows developers to create flexible and responsive layouts. Bootstrap provides several classes and utility classes that make it easy to use Flex Wrap in your web applications. By combining these classes with other Bootstrap features, you can create dynamic and responsive interfaces that look great on any device.