DEV Community

Cover image for Overriding Bootstrap 4 Theme.
Youssef Zidan
Youssef Zidan

Posted on • Edited on

Overriding Bootstrap 4 Theme.

#bootstrap #theme #html #scss

In this shot, we will show you 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. So, after installing Bootstrap 4 via NPM

npm i bootstrap@4
Enter fullscreen mode Exit fullscreen mode

navigate to the 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, we 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 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;
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

Overriding Bootstrap 4 theme

In your root .sass file

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

Results

Colors
Spacing and Sizes


LinkedIn

Top comments (0)