Source
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 testas needed.
You can find and customize these variables for key global options in Bootstrap's scss/_variables.scssfile.
| variable | values | Description |
|---|---|---|
$spacer |
1rem(default), or any value > 0 |
Specifies the default spacer value to programmatically generate our spacer utilities . |
$enable-rounded |
true(default) orfalse |
Enables predefined border-radiusstyles on various components. |
$enable-shadows |
trueor false(default) |
Enables predefined decorative box-shadowstyles on various components. Does not affect box-shadows used for focus states. |
$enable-gradients |
trueor false(default) |
Enables predefined gradients via background-imagestyles on various components. |
$enable-transitions |
true(default) orfalse |
Enables predefined transitions on various components. |
$enable-reduced-motion |
true(default) orfalse |
Enables the prefers-reduced-motionmedia query , which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
$enable-grid-classes |
true(default) orfalse |
Enables the generation of CSS classes for the grid system (eg .row, .col-md-1, etc.). |
$enable-caret |
true(default) orfalse |
Enables pseudo element caret on .dropdown-toggle. |
$enable-button-pointers |
true(default) orfalse |
Add "hand" cursor to non-disabled button elements. |
$enable-rfs |
true(default) orfalse |
Globally enables RFS . |
$enable-validation-icons |
true(default) orfalse |
Enables background-imageicons within textual inputs and some custom forms for validation states. |
$enable-negative-margins |
trueor false(default) |
Enables the generation of negative margin utilities . |
$enable-deprecation-messages |
true(default) orfalse |
Set to falsehide warnings when using any of the deprecated mixins and functions that are planned to be removed in v6. |
$enable-important-utilities |
true(default) orfalse |
Enables the !importantsuffix in utility classes. |
$enable-smooth-scroll |
true(default) orfalse |
Applies scroll-behavior: smoothglobally, except for users asking for reduced motion through prefers-reduced-motionmedia query |