Docs: consistent usage of CSS sections (#38219)

Co-authored-by: Mark Otto <markd.otto@gmail.com>
2025-08-28 23:59:53 +02:00 · 2023-04-10 17:53:28 +02:00
parent 3d84e60d69
commit 01364cb49c
34 changed files with 68 additions and 60 deletions
--- a/site/content/docs/5.3/utilities/background.md
+++ b/site/content/docs/5.3/utilities/background.md
@@ -143,7 +143,7 @@ Color mode background colors are also available as a Sass map:

 {{< scss-docs name="gradient-mixins" file="scss/mixins/_gradients.scss" >}}

-## Utilities API
+### Sass utilities API

 Background utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

--- a/site/content/docs/5.3/utilities/borders.md
+++ b/site/content/docs/5.3/utilities/borders.md
@@ -185,7 +185,7 @@ Color mode adaptive border colors are also available as a Sass map:

 {{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}}

-### Utilities API
+### Sass utilities API

 Border utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

--- a/site/content/docs/5.3/utilities/colors.md
+++ b/site/content/docs/5.3/utilities/colors.md
@@ -134,7 +134,7 @@ Color mode adaptive text colors are also available as a Sass map:

 {{< scss-docs name="theme-text-dark-map" file="scss/_maps.scss" >}}

-### Utilities API
+### Sass utilities API

 Color utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

--- a/site/content/docs/5.3/utilities/display.md
+++ b/site/content/docs/5.3/utilities/display.md
@@ -105,9 +105,9 @@ The print and display classes can be combined.
 <div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
 {{< /example >}}

-## Sass
+## CSS

-### Utilities API
+### Sass utilities API

 Display utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

--- a/site/content/docs/5.3/utilities/flex.md
+++ b/site/content/docs/5.3/utilities/flex.md
@@ -655,9 +655,9 @@ And say you want to vertically center the content next to the image:
 </div>
 {{< /example >}}

-## Sass
+## CSS

-### Utilities API
+### Sass utilities API

 Flexbox utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

--- a/site/content/docs/5.3/utilities/float.md
+++ b/site/content/docs/5.3/utilities/float.md
@@ -39,9 +39,9 @@ Here are all the support classes:
 {{< /float.inline >}}
 {{< /markdown >}}

-## Sass
+## CSS

-### Utilities API
+### Sass utilities API

 Float utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

--- a/site/content/docs/5.3/utilities/interactions.md
+++ b/site/content/docs/5.3/utilities/interactions.md
@@ -33,9 +33,9 @@ If possible, the simpler solution is:
 - For form controls, add the `disabled` HTML attribute.
 - For links, remove the `href` attribute, making it a non-interactive anchor or placeholder link.

-## Sass
+## CSS

-### Utilities API
+### Sass utilities API

 Interaction utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

--- a/site/content/docs/5.3/utilities/link.md
+++ b/site/content/docs/5.3/utilities/link.md
@@ -94,11 +94,11 @@ Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-under
 {{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}

-## Sass
+## CSS

 In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.

-### Utilities API
+### Sass utilities API

 Link utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

--- a/site/content/docs/5.3/utilities/object-fit.md
+++ b/site/content/docs/5.3/utilities/object-fit.md
@@ -54,7 +54,9 @@ The `.object-fit-{value}` and responsive `.object-fit-{breakpoint}-{value}` util
 <video src="..." class="object-fit-none" autoplay></video>
 ```

-## Utilities API
+## CSS
+
+### Sass utilities API

 Object fit utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

--- a/site/content/docs/5.3/utilities/opacity.md
+++ b/site/content/docs/5.3/utilities/opacity.md
@@ -24,7 +24,9 @@ Set the `opacity` of an element using `.opacity-{value}` utilities.
 <div class="opacity-25">...</div>
 ```

-### Utilities API
+## CSS
+
+### Sass utilities API

 Opacity utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

--- a/site/content/docs/5.3/utilities/overflow.md
+++ b/site/content/docs/5.3/utilities/overflow.md
@@ -90,9 +90,9 @@ Adjust the `overflow-y` property to affect the overflow of content vertically.

 Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.

-## Sass
+## CSS

-### Utilities API
+### Sass utilities API

 Overflow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

--- a/site/content/docs/5.3/utilities/position.md
+++ b/site/content/docs/5.3/utilities/position.md
@@ -115,15 +115,15 @@ You can use these classes with existing components to create new ones. Remember
 </div>
 {{< /example >}}

-## Sass
+## CSS

-### Maps
+### Sass maps

 Default position utility values are declared in a Sass map, then used to generate our utilities.

 {{< scss-docs name="position-map" file="scss/_variables.scss" >}}

-### Utilities API
+### Sass utilities API

 Position utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

--- a/site/content/docs/5.3/utilities/shadows.md
+++ b/site/content/docs/5.3/utilities/shadows.md
@@ -17,13 +17,13 @@ While shadows on components are disabled by default in Bootstrap and can be enab
 <div class="shadow-lg p-3 mb-5 bg-body-tertiary rounded">Larger shadow</div>
 {{< /example >}}

-## Sass
+## CSS

-### Variables
+### Sass variables

 {{< scss-docs name="box-shadow-variables" file="scss/_variables.scss" >}}

-### Utilities API
+### Sass utilities API

 Shadow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

--- a/site/content/docs/5.3/utilities/sizing.md
+++ b/site/content/docs/5.3/utilities/sizing.md
@@ -53,9 +53,9 @@ You can also use utilities to set the width and height relative to the viewport.
 <div class="vh-100">Height 100vh</div>
 ```

-## Sass
+## CSS

-### Utilities API
+### Sass utilities API

 Sizing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

--- a/site/content/docs/5.3/utilities/spacing.md
+++ b/site/content/docs/5.3/utilities/spacing.md
@@ -139,15 +139,15 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
 </div>
 {{< /example >}}

-## Sass
+## CSS

-### Maps
+### Sass maps

 Spacing utilities are declared via Sass map and then generated with our utilities API.

 {{< scss-docs name="spacer-variables-maps" file="scss/_variables.scss" >}}

-### Utilities API
+### Sass utilities API

 Spacing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

--- a/site/content/docs/5.3/utilities/text.md
+++ b/site/content/docs/5.3/utilities/text.md
@@ -153,7 +153,7 @@ Font-size utilities are generated from this map, in combination with our utiliti

 {{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}}

-## Utilities API
+### Sass utilities API

 Font and text utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

--- a/site/content/docs/5.3/utilities/vertical-align.md
+++ b/site/content/docs/5.3/utilities/vertical-align.md
@@ -39,9 +39,9 @@ With table cells:
 </table>
 {{< /example >}}

-## Sass
+## CSS

-### Utilities API
+### Sass utilities API

 Vertical align utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

--- a/site/content/docs/5.3/utilities/visibility.md
+++ b/site/content/docs/5.3/utilities/visibility.md
@@ -28,9 +28,9 @@ Apply `.visible` or `.invisible` as needed.
 }
 ```

-## Sass
+## CSS

-### Utilities API
+### Sass utilities API

 Visibility utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

--- a/site/content/docs/5.3/utilities/z-index.md
+++ b/site/content/docs/5.3/utilities/z-index.md
@@ -37,13 +37,13 @@ Learn about our [`z-index` approach]({{< docsref "/extend/approach#z-index-scale

 ## CSS

-### Sass map
+### Sass maps

 Customize this Sass map to change the available values and generated utilities.

 {{< scss-docs name="zindex-levels-map" file="scss/_variables.scss" >}}

-### Utilities API
+### Sass utilities API

 Position utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})