How to override the Bootstrap 4 theme

In this shot, I will demonstrate how to override the default Bootstrap theme with our own custom theme variables.

Bootstrap theme files

First, we need to understand how Bootstrap 4 theme files work. After installing Bootstrap 4 via NPM, navigate to the node_modules/bootstrap/scss/_variables.scss file.

npm i bootstrap@4

We will not make our modifications inside this file. We will just take a quick look to understand how Bootstrap works, and then we will make our modifications.

In this file, we will find every variable used in Bootstrap. If you scroll down, you will see some pre-defined color variables.

_variables.scss

$blue: #007bff !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;

Then, it uses the following variable with its theme variables:

$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;

After that, it creates an SCSS Map:

$theme-colors: () !default;
$theme-colors: map-merge(
  (
    "primary": $primary,
    "secondary": $secondary,
    "success": $success,
    "info": $info,
    "warning": $warning,
    "danger": $danger,
    "light": $light,
    "dark": $dark,
  ),
  $theme-colors
);

Overriding the Bootstrap 4 theme

In your root .sass file, add the following:

// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";

// Adding/Overriding Colors
$theme-colors: map-merge(
  $theme-colors,
  (
    "secondary": #ddc22b,
    "tertiary": #e059c3,
    "quaternary": #25a1a1,
  )
);

// Overriding/Adding Spacers
$spacers: map-merge(
  $spacers,
  (
    10: $spacer * 10,
  )
);
$sizes: map-merge(
  $sizes,
  (
    10: 10%,
    90: 90%,
  )
);

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

Result