Customize theme


Change text direction

To switch the text direction of your webpage from LTR to RTL, please consult the detailed instructions provided in the relevant section of our documentation.
Border width, px
Rounding, rem

To apply the provided styles to your webpage, enclose them within a <style> tag and insert this tag into the <head> section of your HTML document after the following link to the main stylesheet:
<link href="assets/css/theme.min.css">


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 Customize