View on GitHub

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-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, 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-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