Skip to main content Skip to docs navigation
Check
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-container-classes true(default) orfalse Enables the generation of CSS classes for layout containers. (New in v5.2.0)
$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