title: Stacks
description: Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
toc: true
-added:
- version: "5.1"
---
Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/).
-<Callout type="warning">
-**Heads up!** Support for gap utilities with flexbox isn’t available in Safari prior to 14.5, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap).
-</Callout>
-
## Vertical
Use `.vstack` to create vertical layouts. Stacked items are full-width by default. Use `.gap-*` utilities to add space between items.
description: Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.
toc: true
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/grid
+csstricks: https://css-tricks.com/snippets/css/complete-guide-grid/
---
Bootstrap's default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we're seeing in browsers like the new CSS Grid.
title: Display property
description: Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
toc: true
+mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/display
---
## How it works
title: Flex
description: Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
toc: true
+mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/flex
+csstricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
---
import { getData } from '@libs/data'
import { getSequence } from '@libs/utils'
+<Callout type="info" title="Flexbox">
+**Need some quick flexbox layouts?** Consider using [our Stacks helpers]([[docsref:/helpers/stacks]]) that combine common flexbox properties for quick layouts.
+</Callout>
+
## Enable flex behaviors
Apply `display` utilities to create a flexbox container and transform **direct children elements** into flex items. Flex containers and items are able to be modified further with additional flex properties.