2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-11 18:02:28 +03:00

Document the utility API's new css-var boolean

Co-Authored-By: Gaël Poupard <ffoodd@users.noreply.github.com>
This commit is contained in:
Mark Otto
2021-07-18 20:39:02 -07:00
committed by Mark Otto
parent 4d7911a27b
commit 7409271b56
4 changed files with 151 additions and 41 deletions
@@ -6,7 +6,7 @@ group: customize
toc: true
---
Bootstrap includes many [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS for real-time customization without the need to recomple Sass. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser's inspector, a code sandbox, or general prototyping.
Bootstrap includes many [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS for real-time customization without the need to recompile Sass. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser's inspector, a code sandbox, or general prototyping.
**All our custom properties are prefixed with `bs-`** to avoid conflicts with third party CSS.
@@ -51,4 +51,4 @@ a {
## Grid breakpoints
While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the mean team, you can use these variables in other CSS situations, as well as in your JavaScript.
While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the mean time, you can use these variables in other CSS situations, as well as in your JavaScript.