Custom Bootstrap using Sass

I’ve known about SASS for a long time but never took the time to learn how to use it. For a new project (a University project) I wanted to use Bootstrap but also wanted custom colors on the website. Instead of creating my own CSS I decided to stick with Bootstrap but learnt to modify it for my own color palette.

The project is around COVID-19 and medical testing. As such I wanted to use a custom pallet of

Green representing Health

Blue standing for Medical personnel (Professions)

Yellow for Happiness

I spent some time working out how to achieve this in Bootstrap’s provided Scss files. It was so easy that I felt a bit of a fool that I had not learnt this earlier!


Before following this guide, you will need to have Nodejs with NPM installed.

To start lets create a webpage that displays some buttons using Bootstrap. Download boot into the web project (I downloaded Bootstrap sources from ). Unzip the sources into the webpage directory.

No alt text provided for this image

My HTMl file contains



       <link rel="stylesheet" href=" bootstrap-4.5.3\dist\css bootstrap.css" />



       <h1>Custom Bootstrap using Sass</h1>

       <span class="btn btn-primary">Primary</span>

       <span class="btn btn-secondary">Secondary</span>

       <span class="btn btn-danger">Danger</span>

       <span class="btn btn-health">Health</span>

       <span class="btn btn-prof">Prof</span>

       <span class="btn btn-happy">Happy</span>



Which, when viewed in a browser looks like:

No alt text provided for this image

A standard looking Bootstrap example of buttons. The last 3 buttons have classes that do not exist so just get ignored and the standard class=”btn” is used for them.

To start customizing the Bootstrap css we need to install the sass compiler. Using NPM run the following command

npm install -g sass

This installs SASS globally so we can run it from any project. Now I can start customizing boostrap to meet my requirements. First I modify the _variables.scss file found in the bootstrap scss folder. Before I get to custom colors, I’ll just change the primary color to check that my configuration is working correctly:

No alt text provided for this image

For my test I am going to change the primary color to red instead of the normal Bootstrap blue.

Change line 67 to

$primary:       $red !default;

Save the file and now I can compile the Scss into css. In the terminal I run

sass C:\projects\Sass1\bootstrap-4.5.3\scss\bootstrap.scss C:\projects\Sass1\bootstrap-4.5.3\dist\css\bootstrap.css

This command overwrites the originally downloaded CSS file. You could instead place the output file anywhere, for example in a \css directory in your project

Now refresh the web page

No alt text provided for this image

We have effectively changed all *-primary classes to be red.

How about creating our own button classes. Would it not be easier to use class btn-happy for a yellow button instead of trying to remember if the primary or secondary is yellow.

In _variables.scss add the following lines after $dark (at line 75).

$health: $green;
$prof: $blue;

$happy: $yellow;

In theme-colors in the section below add

 "health": $health,

    "prof": $prof,

    "happy": $happy

So that theme-colors looks like

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

Save the changes and compile Scss to css again

When I refresh the web page I can see my custom colored buttons, using my own class names.

No alt text provided for this image

I now have buttons with my custom colors. In fact all the Bootstrap components that use the color pallet are now customized. To show this I can display an alert

    <div class="alert alert-happy mt-5" role="alert">

            A simple Happy alert—check it out!


When we refresh the page:

No alt text provided for this image

Note also how the compilation process did the same color modulation of yellow to fit the color to suit the other alert colors.

Personally, I like the Bootstrap color theme. But being able to modify it to suit my own requirements makes it a lot easier to customize and use wherever I need it. For the website I am designing I don’t have Primary and Secondary colors. I have three primary colors called Health, Prof and Happy.