AppStrap.

Flexbox:

Basics

Since Bootstrap 4 Alplha 6 Bootstrap has Flexbox support by default which makes use of the powerful CSS flexbile box layout module opening up a whole new world of layout power!

Flexbox allows you to quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

With Flexbox the parent element has the ability to control the direct child elements within it.

---

Browser Support

Internet Explorer 9 (and below) does not support Flexbox at all but fortunately AppStrap provides built in fallbacks so your AppStrap based sites will look great in Internet Explorer 9 anyway.

You can also choose to "opt out" of using Flexbox with AppStrap by simply adding the following line of code after all the other CSS files are included within the head tags: View code example

<link href="assets/css/no-flexbox.css" rel="stylesheet">

This will override the Bootstrap Flexbox elements and core AppStrap elements so they use display block & floats instead, magic!

---

Enable flex behaviors

To enable Flexbox on an element you can apply one of the following classes: .d-flex or .d-inline-flex .

Both classes are also responsive: .d-BREAKPOINT-flex and .d-BREAKPOINT-inline-flex so you can change the flex display per breakpoint too.

View code example

<div class="d-flex p-2 bg-faded">I'm a flexbox container!</div>

---

View code example

<div class="d-inline-flex p-2 bg-faded">I'm an inline flexbox container!</div>

---

Force equal height and width

To force all items within a flex container to be equal width simple add the class .flex-ew to each element within the flex container.

Flexbox will automatically force the heights to be the same size as the browser default is to strech.

View code example

<div class="d-flex flex-row bg-grey">
  <div class="p-2 bg-faded m-2 flex-ew text-center">Flex column item 1</div>
  <div class="p-2 bg-faded m-2 flex-ew text-center" style="height: 10rem;">Flex column item 2, i'm longest, everyone follows my height</div>
  <div class="p-2 bg-faded m-2 flex-ew text-center">Flex column item 3</div>
</div>

---

Flex content direction

Flexbox considers content as either columns which stack on top of each other or rows which stack side by side. Bootstrap offers the following classes to control the content directions.

Columns

Use .flex-column to set a vertical direction, or .flex-column-reverse to start the vertical direction from the opposite side.

Both classes are also responsive: .flex-BREAKPOINT-column and .flex-BREAKPOINT-column-reverse so you can vertically stack elements from a given breakpoint (see: Responsive Columns and Rows below).

View code example

<div class="d-flex flex-column mb-3">
  <div class="p-2 bg-faded mb-2">Flex column item 1</div>
  <div class="p-2 bg-faded mb-2">Flex column item 2</div>
  <div class="p-2 bg-faded mb-2">Flex column item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-faded mb-2">Flex column reverse item 1</div>
  <div class="p-2 bg-faded mb-2">Flex column reverse item 2</div>
  <div class="p-2 bg-faded mb-2">Flex column reverse item 3</div>
</div>

Rows

Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.

Both classes are also responsive: .flex-BREAKPOINT-row and .flex-BREAKPOINT-row-reverse so you can horizontally stack elements from a given breakpoint (see: Responsive Columns and Rows below).

View code example

<div class="d-flex flex-row mb-3 bg-grey">
  <div class="p-2 mr-2 bg-faded">Flex row item 1</div>
  <div class="p-2 mr-2 bg-faded">Flex row item 2</div>
  <div class="p-2 bg-faded">Flex row item 3</div>
</div>
<div class="d-flex flex-row-reverse bg-grey">
  <div class="p-2 bg-faded">Flex row reverse item 1</div>
  <div class="p-2 mr-2 bg-faded">Flex row reverse item 2</div>
  <div class="p-2 mr-2 bg-faded">Flex row reverse item 3</div>
</div>

Responsive Columns and Rows

Using the responsive versions of the columns and rows classes you can create responsive elements which for example might stack vertically on mobile and then stack horizontally on desktop.

You can combine with the spacer utilities to control the spacing between elements per breakpoint.

View code example

<div class="d-flex flex-column flex-md-row mb-3">
  <div class="p-2 mb-2 mb-md-0 mr-md-2 bg-faded">Stacked vertically on small screens, stacked horizontal from md breakpoint up</div>
  <div class="p-2 mb-2 mb-md-0 mr-md-2 bg-faded">Stacked vertically on small screens, stacked horizontal from md breakpoint up</div>
  <div class="p-2 mb-2 mb-md-0 bg-faded">Stacked vertically on small screens, stacked horizontal from md breakpoint up</div>
</div>
<div class="d-flex flex-row flex-md-column">
  <div class="p-2 mr-2 mr-md-0 mb-md-2 bg-faded">Side by side on mobile, stacked vertically from md breakpoint up</div>
  <div class="p-2 bg-faded">Side by side on mobile, stacked vertically from md breakpoint up</div>
</div>

---

Horizontal alignment AKA justify content

To control the horizontal alignment of elements within the "flex" containers by using the following justify-content classes:

1. .justify-content-start and justify-content-BREAKPOINT-start :
   aligns columns to the left ("start").
2. .justify-content-end and justify-content-BREAKPOINT-end :
   aligns columns to the right ("end").
3. .justify-content-center and justify-content-BREAKPOINT-center :
   aligns columns to the center ("center").
4. .justify-content-around and justify-content-BREAKPOINT-around :
   centers columns and distributes them evenly.
5. .justify-content-between and justify-content-BREAKPOINT-between :
   stretches columns to the full width of their row container and distributes them evenly.

View code example

<div class="d-flex justify-content-start mb-3 bg-grey">
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded">Flex item</div>
</div>
<div class="d-flex justify-content-end mb-3 bg-grey">
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded">Flex item</div>
</div>
<div class="d-flex justify-content-center mb-3 bg-grey">
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded">Flex item</div>
</div>
<div class="d-flex justify-content-between mb-3 bg-grey">
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded">Flex item</div>
</div>
<div class="d-flex justify-content-around bg-grey">
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded">Flex item</div>
</div>

---

Vertical alignment AKA align items

To control the vertical alignment of elements within the "flex" containers by using the following align-items classes:

1. .align-items-start and align-items-BREAKPOINT-start :
   aligns columns to the top ("start").
2. .align-items-end and align-items-BREAKPOINT-end :
   aligns columns to the bottom ("end").
3. .align-items-center and align-items-BREAKPOINT-center :
   aligns columns to the middle ("center").
4. .align-items-stretch and align-items-BREAKPOINT-stretch :
   stretches column to the full height of their row container.

You can also use align-self classes on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from the same options as align-items: start, end, center, baseline, or stretch (browser default).

The align-self classes are also responsive: .align-self-BREAKPOINT-(start|end|center|baseline|stretch)

View code example

<div class="d-flex align-items-start bg-grey mb-3" style="height: 10rem">
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded">Flex item</div>
</div>
<div class="d-flex align-items-end bg-grey mb-3" style="height: 10rem">
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded">Flex item</div>
</div>
<div class="d-flex align-items-center bg-grey mb-3" style="height: 10rem">
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded">Flex item</div>
</div>
<div class="d-flex align-items-baseline bg-grey mb-3" style="height: 10rem">
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded">Flex item</div>
</div>
<div class="d-flex align-items-stretch bg-grey mb-3" style="height: 10rem">
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded">Flex item</div>
</div>
<div class="d-flex align-items-stretch bg-grey" style="height: 10rem">
  <div class="p-2 bg-faded mr-2">Flex item: stretched</div>
  <div class="p-2 bg-faded align-self-center mr-2">Flex item: align middle</div>
  <div class="p-2 bg-faded">Flex item: stretched</div>
</div>

---

Responsive alignment

You can also mix and match the alignment classes to control vertical and horizontal alignment as well as controlling alignment per breakpoint.

View code example

<div class="d-flex align-items-start justify-content-center bg-grey mb-3" style="height: 10rem">
  <div class="p-2 bg-faded mr-2">Flex item: align top middle</div>
  <div class="p-2 bg-faded">Flex item: align top middle</div>
</div>
<div class="d-flex bg-grey mb-3 align-items-md-center justify-content-md-center" style="height: 10rem">
  <div class="p-2 bg-faded mr-2">Flex item: align center middle from md up</div>
  <div class="p-2 bg-faded mr-2">Flex item: align center middle from md up</div>
  <div class="p-2 bg-faded">Flex item: align center middle from md up</div>
</div>
<div class="d-flex bg-grey mb-3 align-items-stretch justify-content-around" style="height: 10rem">
  <div class="p-2 bg-faded mr-2">Flex item: full height, even width all breakpoints</div>
  <div class="p-2 bg-faded mr-2">Flex item: full height, even width all breakpoints</div>
  <div class="p-2 bg-faded">Flex item: full height, even width all breakpoints</div>
</div>

---

Nested Flex elements

You can even nest Flex elements within Flex elements which allows you to continue the inner content and layout. This is useful to vertically & horizontally center content.

View code example

<div class="d-flex align-items-stretch justify-content-center bg-grey mb-3" style="height: 10rem">
  <div class="p-2 bg-faded mx-1 d-flex align-items-center justify-content-center">
    <div class="p-3">Nested Flex item: align center middle</div>
  </div>
  <div class="p-2 bg-faded mx-1 d-flex align-items-center justify-content-center">
    <div class="p-3">Nested Flex item: align center middle</div>
  </div>
</div>

---

Auto margins

Easily move all flex items to one side, but keep another on the opposite end by mixing justify-content and align-items with ml-auto , mt-auto , mr-auto & mb-auto classes.

Alignment an auto margin will autmatically pull the item to the opposite margin. For example: setting mr-auto will pull the element to the left edge of the container.

View code example

<div class="d-flex justify-content-end bg-grey mb-3">
  <div class="mr-auto p-2 bg-faded">Flex item aligned left</div>
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded">Flex item</div>
</div>

<div class="d-flex justify-content-start bg-grey mb-3">
  <div class="p-2 bg-faded mr-2">Flex item</div>
  <div class="p-2 bg-faded">Flex item</div>
  <div class="ml-auto p-2 bg-faded">Flex item aligned right</div>
</div>

<div class="d-flex align-items-start flex-column bg-grey mb-3" style="height: 12rem;">
  <div class="mb-auto p-2 bg-faded">Flex item aligned top</div>
  <div class="p-2 bg-faded mb-2">Flex item</div>
  <div class="p-2 bg-faded">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column bg-grey mb-3" style="height: 12rem;">
  <div class="p-2 bg-faded  mb-2">Flex item</div>
  <div class="p-2 bg-faded">Flex item</div>
  <div class="mt-auto p-2 bg-faded">Flex item align bottom</div>
</div>

---

Content Wrapping

Change how flex items wrap within a flex container. Choose from no wrapping at all (the browser default) with .flex-nowrap , wrapping with .flex-wrap , or reverse wrapping with .flex-wrap-reverse .

These classes are also responsive: .flex-BREAKPOINT-nowrap , .flex-BREAKPOINT-wrap and .flex-BREAKPOINT-wrap-reverse so you can control wrapping per breakpoint.

View code example

<!-- .flex-nowrap - overflows container -->
<div class="d-flex flex-nowrap bg-grey mb-3">
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>  
</div>

<!-- .flex-wrap - wraps elements ontop next lines -->
<div class="d-flex flex-wrap bg-grey mb-3">
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>  
</div>

<!-- .flex-wrap-reverse - wraps elements onto next lines in reverse order -->
<div class="d-flex flex-wrap-reverse bg-grey mb-3">
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>  
</div>

---

Content Ordering

Change the visual order of specific flex items using the classes: .order-first , .order-last and .flex-unordered classes.

These classes are also responsive: .flex-BREAKPOINT-first , .flex-BREAKPOINT-last and .flex-BREAKPOINT-unordered so you can control content order per breakpoint.

View code example

<div class="d-flex flex-nowrap bg-grey">
  <div class="order-last p-2 m-2 bg-faded">First flex item</div>
  <div class="p-2 m-2 bg-faded">Second flex item</div>
  <div class="order-first p-2 m-2 bg-faded">Third flex item</div>
</div>

---

Align Content

If you flex content flows over multiple lines/row you can use the .align-content classes to control the vertical distribution of elements.

1. .align-content-start and align-content-BREAKPOINT-start :
   aligns columns to the top ("start").
2. .align-content-end and align-content-BREAKPOINT-end :
   aligns columns to the bottom ("end").
3. .align-content-center and align-content-BREAKPOINT-center :
   aligns columns to the middle ("center").
4. .align-content-stretch and align-content-BREAKPOINT-stretch :
   stretches column to the full height of their row container.

View code example

<!-- .align-content-start - align top -->
<div class="d-flex flex-wrap bg-grey mb-3 align-content-start" style="height: 15rem;">
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>  
</div>

<!-- .align-content-end - align bottom -->
<div class="d-flex flex-wrap bg-grey mb-3 align-content-end" style="height: 15rem;">
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>  
</div>

<!-- .align-content-center - align center -->
<div class="d-flex flex-wrap bg-grey mb-3 align-content-center" style="height: 15rem;">
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>  
</div>

<!-- .align-content-between - align top & bottom -->
<div class="d-flex flex-wrap bg-grey mb-3 align-content-between" style="height: 15rem;">
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>  
</div>

<!-- .align-content-around - vertically distributed -->
<div class="d-flex flex-wrap bg-grey mb-3 align-content-around" style="height: 15rem;">
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>  
</div>

<!-- .align-content-stretch - stretch items -->
<div class="d-flex flex-wrap bg-grey mb-3 align-content-stretch" style="height: 15rem;">
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>
  <div class="p-2 bg-faded m-2">Flex item</div>  
</div>