Customize

# Global options

The Bootstrap framework provides a variety of customizable global options through the `_variables.scss` file. These settings allow you to quickly modify the overall styling by enabling or disabling specific features according to your project needs.

## Overview of available options

    // Options
    //
    // Quickly modify global styling by enabling or disabling optional features.

    $enable-caret:                true !default;
    $enable-rounded:              true !default;
    $enable-shadows:              false !default;
    $enable-gradients:            false !default;
    $enable-transitions:          true !default;
    $enable-reduced-motion:       true !default;
    $enable-smooth-scroll:        true !default;
    $enable-grid-classes:         true !default;
    $enable-container-classes:    true !default;
    $enable-cssgrid:              false !default;
    $enable-button-pointers:      true !default;
    $enable-rfs:                  true !default;
    $enable-validation-icons:     true !default;
    $enable-negative-margins:     false !default;
    $enable-deprecation-messages: true !default;
    $enable-important-utilities:  true !default;

    $enable-dark-mode:            true !default;
    $color-mode-type:             data !default; // `data` or `media-query`

## Customizing Bootstrap options

To customize these settings to your needs, override the default values by copying them into your project's `src/scss/_user-variables.scss` file and modifying the values accordingly. This approach ensures that your custom configurations are applied throughout the framework.

### Example of customizing variables

Suppose you want to disable rounded corners and shadows, but enable CSS grid support. You would copy the relevant variables into `src/scss/_user-variables.scss` and adjust them as follows:

    // Inside src/scss/_user-variables.scss

    $enable-rounded: false;
    $enable-shadows: false;
    $enable-cssgrid: true;

### Color mode configuration

Bootstrap also supports different color modes. By default, the `$color-mode-type` is set to `data`, which means the color mode can be toggled via `data-bs-theme` attributes in HTML. Alternatively, if set to `media-query`, the color mode will respond to the user's system preferences.

Top