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.

    VariableValuesDescription
    $spacer1rem (default), or any value > 0Specifies the default spacer value to programmatically generate our spacer utilities.
    $enable-roundedtrue (default) or falseEnables predefined border-radius styles on various components.
    $enable-shadowstrue or false (default)Enables predefined box-shadow styles on various components.
    $enable-gradientstrue or false (default)Enables predefined gradients via background-image styles on various components.
    $enable-transitionstrue (default) or falseEnables predefined transitions on various components.
    $enable-reduced-motiontrue (default) or falseEnables the prefers-reduced-motion media query, which suppresses certain animations/transitions based on the users’ browser/operating system preferences.
    $enable-grid-classestrue (default) or falseEnables the generation of CSS classes for the grid system (e.g. .row, .col-md-1, etc.).
    $enable-carettrue (default) or falseEnables pseudo element caret on .dropdown-toggle.
    $enable-button-pointerstrue (default) or falseAdd “hand” cursor to non-disabled button elements.
    $enable-rfstrue (default) or falseGlobally enables RFS.
    $enable-validation-iconstrue (default) or falseEnables background-image icons within textual inputs and some custom forms for validation states.
    $enable-negative-marginstrue or false (default)Enables the generation of negative margin utilities.
    $enable-deprecation-messagestrue or false (default)Set to true to show warnings when using any of the deprecated mixins and functions that are planned to be removed in v5.
    $enable-important-utilitiestrue (default) or falseEnables the !important suffix in utility classes.