]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
Edits
authorMark Otto <markdotto@gmail.com>
Thu, 29 May 2025 18:15:55 +0000 (11:15 -0700)
committerMark Otto <markdotto@gmail.com>
Sat, 31 May 2025 03:33:58 +0000 (20:33 -0700)
site/src/content/docs/helpers/stacks.mdx
site/src/content/docs/layout/grid.mdx
site/src/content/docs/utilities/display.mdx
site/src/content/docs/utilities/flex.mdx

index 79b19919953bf2b10993570b883b6d16ef24f58a..71a20933c971481c85fe59de1f47e11f24f60dc9 100644 (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 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.
index 6c07c65a8f96433f5ad65ea968ed8e50c094b8f6..e115a1ca0ab7c3cc2efd1117eb89f8ee0d248a39 100644 (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.
index 2c69395c3ce8b4d180bd15912021eb2ed6c9076e..87c24caf9a974dc2aca748556e71c7f428658240 100644 (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
index e8284175c828631dd407e17b829f9e02f13fedb8..5234245b18a598c58bffc17cbf8aefa51d92c4c5 100644 (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.