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.

Why I choose PHP and JavaScript

No alt text provided for this image

I’m a professional software developer but choose to use PHP and JavaScript for my “personal” projects. When other software development professionals hear this I often get asked why, because PHP has “no future”. 

It is all about ease of use! Getting a local development server up and running on my new laptop takes about 5 minutes. I just download XAMPP and run an install, for tooling I download VS Code (also free) and I can be developing new code 10 minutes after I open my brand new laptop. Best of all it is completely free! 

But, I hear my colleagues say, you could use the cloud for Nodejs, C#, Java etc! Yes I could but those are 1. Not as easy to setup and 2. Not quite as free. If I develop something that has financial possibilities I can upload it onto a basic web hosting site for R40 per month. If and when it becomes a success I can then move it to a real hosting environment. 

No alt text provided for this image

But, I hear them say again, you can set up a free web application on Azure or a t2.micro on AWS. Again, I agree I could, but then I need to worry about the OS, or the hosting platform, and then I need to check my security so that I can access my MySQL database from my local development machine. With my friendly local hosting provider I get a pre setup FTP account, a click of a button for a MySQL database that I can access from my local machine. 

But, yet again <rolls eyes>, that will never be as secure. I agree it isn’t, but so far it’s a simple little idea I was testing out, it is not a super secret app that has my banking details on it. 

IF and WHEN I get an idea that works, then taking the time and effort to configure a secure, elastic, load balanced and expensive environment will become worth while.