DEV Community

loading...
Cover image for Overriding Bootstrap Theme [The Right Way]

Overriding Bootstrap Theme [The Right Way]

youssefzidan profile image YoussefZidan Updated on ・2 min read

In this article, I will show you how to override the default Bootstrap theme with your own custom theme variables.

First, we need to understand how Bootstrap theme works.

So, after installing Bootstrap via NPM

npm i bootstrap
Enter fullscreen mode Exit fullscreen mode

Navigate to node_modules/bootstrap/scss/_variables.scss file.

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 modification in a proper way.

In this file, you will find every variable used in Bootstrap.
Scrolling down we 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;
Enter fullscreen mode Exit fullscreen mode

And then it uses these 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;
Enter fullscreen mode Exit fullscreen mode

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
);
Enter fullscreen mode Exit fullscreen mode

We will use this $theme-colors map to override or define new theme colors that we can use everywhere in bootstrap whether its background color, text color, button color, etc...

In your root style.scss import Bootstrap and change theme colors as the following:

// Changing Bootstrap Theme Colors
$theme-colors: (
  "primary": #bf309e,
  "secondary": #d3b530,
);

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";
Enter fullscreen mode Exit fullscreen mode

Make sure to put your $theme-colors before importing Bootstrap.

You can also add new theme color variables:

$theme-colors: (
  "primary": #bf309e,
  "secondary": #d3b530,
  "tertiary": #30d3aa,
  "quaternary": #6e30d3
);
Enter fullscreen mode Exit fullscreen mode

And this will work just fine with all Bootstrap classes.

For example, bg-tertiary, btn-quaternary, etc...

Using the same approach you can override any bootstrap variable you see in _variables.scss

For example, the $sizes map in Bootstrap is:

$sizes: () !default;
$sizes: map-merge(
  (
    25: 25%,
    50: 50%,
    75: 75%,
    100: 100%,
    auto: auto
  ),
  $sizes
);
Enter fullscreen mode Exit fullscreen mode

Now we can create something like:

$sizes: map-merge(
  (
    10: 10%,
    35: 35%,
    85: 85%,
  )
Enter fullscreen mode Exit fullscreen mode

And so on...

Thank You!

Discussion (0)

Forem Open with the Forem app