Options
Quickly customize Bootstrap with built-in variables to easily toggle global CSS preferences for controlling style and behavior.
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.
| Variable | Values | Description |
|---|---|---|
$spacer |
1rem (default), or any value > 0 |
Specifies the default spacer value to programmatically generate our spacer utilities. |
$enable-dark-mode |
true (default) or false |
Enables built-in dark mode support 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-shadows 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 transitions on various
components.
|
$enable-reduced-motion |
true (default) or false |
Enables the
prefers-reduced-motion media query, 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. |
$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. |
$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
|