From 1e3672418ab495fbee0f1de8f67d1d12805b4a9a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 15 Apr 2020 17:11:16 -0700 Subject: [PATCH] pull in latest from old theming page --- site/content/docs/4.3/customize/css-variables.md | 8 +++++--- site/content/docs/4.3/customize/options.md | 3 ++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/site/content/docs/4.3/customize/css-variables.md b/site/content/docs/4.3/customize/css-variables.md index a78fb21a1d..94989c3f1a 100644 --- a/site/content/docs/4.3/customize/css-variables.md +++ b/site/content/docs/4.3/customize/css-variables.md @@ -6,7 +6,9 @@ group: customize toc: true --- -Bootstrap includes around two dozen [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS. 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 around two dozen [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS. These provide easy access to commonly used values like our theme colors 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.** ## Available variables @@ -32,9 +34,9 @@ CSS variables offer similar flexibility to Sass's variables, but without the nee {{< highlight css >}} body { - font: 1rem/1.5 var(--font-family-sans-serif); + font: 1rem/1.5 var(--bs-font-sans-serif); } a { - color: var(--blue); + color: var(--bs-blue); } {{< /highlight >}} diff --git a/site/content/docs/4.3/customize/options.md b/site/content/docs/4.3/customize/options.md index 381722f850..ed0a19210d 100644 --- a/site/content/docs/4.3/customize/options.md +++ b/site/content/docs/4.3/customize/options.md @@ -21,8 +21,9 @@ You can find and customize these variables for key global options in Bootstrap's | `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). | | `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. | | `$enable-button-pointers` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. | -| `$enable-rfs` | `true` (default) or `false` | Globally enables [RFS]({{< docsref "/getting-started/rfs" >}}). | +| `$enable-rfs` | `true` (default) or `false` | Globally enables [RFS]({{< docsref "/getting-started/rfs" >}}). | | `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. | +| `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities]({{< docsref "/utilities/spacing#negative-margin" >}}). | | `$enable-deprecation-messages` | `true` or `false` (default) | Set to `true` to show warnings when using any of the deprecated mixins and functions that are planned to be removed in `v5`. | | `$enable-important-utilities` | `true` (default) or `false` | Enables the `!important` suffix in utility classes. | {{< /table >}}