Skip to main content Skip to docs navigation
in English

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-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-caret true (default) or false Enables pseudo element caret on .dropdown-toggle.
$enable-button-pointers true (default) or false Lägg till "hand"-markör till icke-inaktiverade knappelement.
$enable-rfs true(standard) ellerfalse Globalt möjliggör RFS .
$enable-validation-icons true(standard) ellerfalse Aktiverar background-imageikoner i textinmatningar och vissa anpassade formulär för valideringstillstånd.
$enable-negative-margins trueeller false(standard) Möjliggör generering av verktyg för negativ marginal .
$enable-deprecation-messages true(standard) ellerfalse Ställ in på för falseatt dölja varningar när du använder någon av de föråldrade mixinerna och funktionerna som är planerade att tas bort i v6.
$enable-important-utilities true(standard) ellerfalse Aktiverar !importantsuffixet i verktygsklasser.
$enable-smooth-scroll true(standard) ellerfalse Gäller scroll-behavior: smoothglobalt, förutom för användare som ber om minskad rörelse genom prefers-reduced-motionmediefråga