summaryrefslogtreecommitdiffstats
path: root/site/content/docs/5.3/customize/options.md
diff options
context:
space:
mode:
Diffstat (limited to 'site/content/docs/5.3/customize/options.md')
-rw-r--r--site/content/docs/5.3/customize/options.md32
1 files changed, 32 insertions, 0 deletions
diff --git a/site/content/docs/5.3/customize/options.md b/site/content/docs/5.3/customize/options.md
new file mode 100644
index 0000000..b5c4fc3
--- /dev/null
+++ b/site/content/docs/5.3/customize/options.md
@@ -0,0 +1,32 @@
+---
+layout: docs
+title: Options
+description: Quickly customize Bootstrap with built-in variables to easily toggle global CSS preferences for controlling style and behavior.
+group: customize
+---
+
+Customize Bootstrap with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed.
+
+You can find and customize these variables for key global options in Bootstrap's `scss/_variables.scss` file.
+
+{{< bs-table "table table-options" >}}
+| Variable | Values | Description |
+| ------------------------------ | ---------------------------------- | -------------------------------------------------------------------------------------- |
+| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{< docsref "/utilities/spacing" >}}). |
+| `$enable-dark-mode` | `true` (default) or `false` | Enables built-in [dark mode support]({{< docsref "/customize/color-modes#dark-mode" >}}) across the project and its components. |
+| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. |
+| `$enable-shadows` | `true` or `false` (default) | Enables predefined decorative `box-shadow` styles on various components. Does not affect `box-shadow`s used for focus states. |
+| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. |
+| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. |
+| `$enable-reduced-motion` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
+| `$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-container-classes` | `true` (default) or `false` | Enables the generation of CSS classes for layout containers. (New in v5.2.0) |
+| `$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-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` (default) or `false` | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. |
+| `$enable-important-utilities` | `true` (default) or `false` | Enables the `!important` suffix in utility classes. |
+| `$enable-smooth-scroll` | `true` (default) or `false` | Applies `scroll-behavior: smooth` globally, except for users asking for reduced motion through [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}) |
+{{< /bs-table >}}