Docs: consistent usage of CSS sections (#38219)

Co-authored-by: Mark Otto <markd.otto@gmail.com>

site/content/docs/5.3/components/alerts.md

@@ -11,7 +11,7 @@ toc: true
 Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
 
 {{< callout info >}}
-**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [the Sass loop](#sass-loop).
+**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [a Sass loop](#sass-loops).
 {{< /callout >}}
 
 {{< example >}}
@@ -158,7 +158,7 @@ As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS
 
 {{< scss-docs name="alert-variables" file="scss/_variables.scss" >}}
 
-### Sass mixin
+### Sass mixins
 
 {{< deprecated-in "5.3.0" >}}
 
@@ -166,7 +166,7 @@ Used in combination with `$theme-colors` to create contextual modifier classes f
 
 {{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}}
 
-### Sass loop
+### Sass loops
 
 Loop that generates the modifier classes with the `alert-variant()` mixin.
 

site/content/docs/5.3/components/list-group.md

@@ -157,7 +157,7 @@ Add `.list-group-horizontal` to change the layout of list group items from verti
 ## Variants
 
 {{< callout info >}}
-**Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [the Sass loop](#sass-loop).
+**Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [a Sass loop](#sass-loops).
 {{< /callout >}}
 
 Use contextual classes to style list items with a stateful background and color.
@@ -325,7 +325,7 @@ Used in combination with `$theme-colors` to generate the [contextual variant cla
 
 {{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}}
 
-### Sass loop
+### Sass loops
 
 Loop that generates the modifier classes with an overriding of CSS variables.
 

site/content/docs/5.3/components/modal.md

@@ -769,7 +769,7 @@ As part of Bootstrap's evolving CSS variables approach, modals now use local CSS
 
 {{< scss-docs name="modal-variables" file="scss/_variables.scss" >}}
 
-### Sass loop
+### Sass loops
 
 [Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`.
 

site/content/docs/5.3/components/navbar.md

@@ -810,7 +810,7 @@ Variables for the [dark navbar](#color-schemes):
 
 {{< scss-docs name="navbar-dark-variables" file="scss/_variables.scss" >}}
 
-### Sass loop
+### Sass loops
 
 [Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`.
 

site/content/docs/5.3/content/tables.md

@@ -829,7 +829,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
 
 {{< scss-docs name="table-variables" file="scss/_variables.scss" >}}
 
-### Sass loop
+### Sass loops
 
 {{< scss-docs name="table-loop" file="scss/_variables.scss" >}}
 

site/content/docs/5.3/customize/color-modes.md

@@ -203,7 +203,7 @@ CSS variables for our dark color mode are partially generated from dark mode spe
 
 {{< scss-docs name="sass-dark-mode-vars" file="scss/_variables-dark.scss" >}}
 
-### Sass mixin
+### Sass mixins
 
 Styles for dark mode, and any custom color modes you create, can be scoped appropriately to the `data-bs-theme` attribute selector or media query with the customizable `color-mode()` mixin. See the [Sass usage section](#building-with-sass) for more details.
 

site/content/docs/5.3/customize/components.md

@@ -34,7 +34,7 @@ Should you modify your `$grid-breakpoints`, your changes will apply to all the l
 
 {{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
 
-For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
+For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]({{< docsref "/layout/grid#css" >}}).
 
 ## Creating your own
 

site/content/docs/5.3/forms/validation.md

@@ -371,11 +371,11 @@ These variables are also color mode adaptive, meaning they change color while in
 
 ### Sass mixins
 
-Two mixins are combined, through our [loop](#loop), to generate our form validation feedback styles.
+Two mixins are combined, through our [loop](#sass-loops), to generate our form validation feedback styles.
 
 {{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}}
 
-### Sass map
+### Sass maps
 
 This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states.
 
@@ -383,7 +383,7 @@ This is the validation Sass map from `_variables.scss`. Override or extend this
 
 Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles.
 
-### Sass loop
+### Sass loops
 
 Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop.
 

site/content/docs/5.3/helpers/focus-ring.md

@@ -45,13 +45,13 @@ By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus
 </a>
 {{< /example >}}
 
-### Sass
+### Sass variables
 
 Customize the focus ring Sass variables to modify all usage of the focus ring styles across your Bootstrap-powered project.
 
 {{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}}
 
-### Utilities
+### Sass utilities API
 
 In addition to `.focus-ring`, we have several `.focus-ring-*` utilities to modify the helper class defaults. Modify the color with any of our [theme colors]({{< docsref "/customize/color#theme-colors" >}}). Note that the light and dark variants may not be visible on all background colors given current color mode support.
 

site/content/docs/5.3/helpers/icon-link.md

@@ -70,13 +70,13 @@ Customize the color by overriding the `--bs-link-*` CSS variable:
 </a>
 {{< /example >}}
 
-### Sass
+### Sass variables
 
 Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project.
 
 {{< scss-docs name="icon-link-variables" file="scss/_variables.scss" >}}
 
-### Utilities
+### Sass utilities API
 
 Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset.
 

site/content/docs/5.3/helpers/ratio.md

@@ -74,7 +74,7 @@ This CSS variable makes it easy to modify the aspect ratio across breakpoints. T
 {{< /example >}}
 
 
-## Sass map
+## Sass maps
 
 Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$ratio-aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use.
 

site/content/docs/5.3/layout/breakpoints.md

@@ -37,7 +37,7 @@ These breakpoints are customizable via Sass—you'll find them in a Sass map in
 
 {{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
 
-For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
+For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]({{< docsref "/layout/grid#css" >}}).
 
 ## Media queries
 

site/content/docs/5.3/layout/containers.md

@@ -64,12 +64,18 @@ Use `.container-fluid` for a full width container, spanning the entire width of
 </div>
 ```
 
-## Sass
+## CSS
+
+### Sass variables
 
 As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in `_variables.scss`) that powers them:
 
 {{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}}
 
+For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#css" >}}).
+
+### Sass mixins
+
 In addition to customizing the Sass, you can also create your own containers with our Sass mixin.
 
 ```scss
@@ -87,5 +93,3 @@ In addition to customizing the Sass, you can also create your own containers wit
   @include make-container();
 }
 ```
-
-For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).

site/content/docs/5.3/layout/grid.md

@@ -46,7 +46,7 @@ Breaking it down, here's how the grid system comes together:
 
 - **Gutters are also responsive and customizable.** [Gutter classes are available]({{< docsref "/layout/gutters" >}}) across all breakpoints, with all the same sizes as our [margin and padding spacing]({{< docsref "/utilities/spacing" >}}). Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters.
 
-- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
+- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass-variables) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
 
 Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9).
 

site/content/docs/5.3/migration.md

@@ -148,13 +148,13 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
 
 - Alert variants are now styled via CSS variables.
 
-- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.alert-variant()` mixin is now deprecated. We now [use the Sass loop]({{< docsref "/components/alerts#sass-loop" >}}) directly to modify the component's default CSS variables for each variant.
+- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.alert-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/alerts#sass-loops" >}}) directly to modify the component's default CSS variables for each variant.
 
 #### List group
 
 - List group item variants are now styled via CSS variables.
 
-- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.list-group-variant()` mixin is now deprecated. We now [use the Sass loop]({{< docsref "/components/list-group#sass-loop" >}}) directly to modify the component's default CSS variables for each variant.
+- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.list-group-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/list-group#sass-loops" >}}) directly to modify the component's default CSS variables for each variant.
 
 #### Dropdowns
 

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" >}})
 

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" >}})
 

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" >}})
 

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" >}})
 

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" >}})
 

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" >}})
 

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" >}})
 

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" >}})
 

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" >}})
 

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" >}})
 

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" >}})
 

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" >}})
 

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" >}})
 

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" >}})
 

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" >}})
 

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" >}})
 

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" >}})
 

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" >}})
 

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" >}})