This commit is contained in:
Mark Otto 2025-05-29 11:15:55 -07:00
parent 0cd00d3703
commit ad3bffc613
4 changed files with 8 additions and 6 deletions

View File

@ -2,16 +2,10 @@
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 isnt 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.

View File

@ -3,6 +3,7 @@ title: CSS Grid
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.

View File

@ -2,6 +2,7 @@
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

View File

@ -2,11 +2,17 @@
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.