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 >}}
{{< scss-docs name="alert-variables" file="scss/_variables.scss" >}}
-### Sass mixin
+### Sass mixins
{{< deprecated-in "5.3.0" >}}
{{< 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.
## 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.
{{< 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.
{{< 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`.
{{< 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`.
{{< scss-docs name="table-variables" file="scss/_variables.scss" >}}
-### Sass loop
+### Sass loops
{{< scss-docs name="table-loop" file="scss/_variables.scss" >}}
{{< 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.
{{< 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
### 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.
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.
</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.
</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.
{{< /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.
{{< 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
</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
@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" >}}).
- **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).
- 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
{{< 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" >}})
{{< 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" >}})
{{< 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" >}})
<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" >}})
</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" >}})
{{< /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" >}})
- 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" >}})
{{< 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" >}})
<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" >}})
<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" >}})
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" >}})
</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" >}})
<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" >}})
<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" >}})
</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" >}})
{{< 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" >}})
</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" >}})
}
```
-## 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" >}})
## 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" >}})
projects / thirdparty / bootstrap.git / commitdiff
