Bootstrap Sass Installation and Customization

Share this article

Bootstrap Sass Installation and Customization

Bootstrap is a popular, open-source framework. Complete with pre-built components, it allows web designers of all skill levels to quickly build a site. The latest version of Bootstrap uses Sass as the preprocessor of choice. In this article, I’ll show you how to configure and customize a Bootstrap Sass-based project.

Bootstrap Installation

There are multiple ways to obtain and install the Bootstrap source files. Just remember that whatever method and package manager you choose, make sure you have a Sass compiler and Autoprefixer up and running. Bootstrap needs both in order to work.

Download Bootstrap files

We can download the Bootstrap files from the Bootstrap download page. Once downloaded, we can extract the contents of the file into our project’s folder.


With Node.js installed, we can quickly install the npm package for Bootstrap by typing in the command line:

npm install bootstrap

Ruby Gems

We can include Bootstrap in a Ruby app using Bundler and Ruby Gems with this command in the Gemfile:

gem 'bootstrap', '~> 4.0.0'

Bootstrap Sass Setup

Once we have Bootstrap installed we need to set up our project. The first thing we want to do is create a sass folder to hold our SCSS files and a stylesheets folder to store the compiled CSS. After that, we create a file named app.scss inside the sass folder.

The app.scss file is used to import Bootstrap components.

The next thing we want to do is find the _variables.scss file inside the Bootstrap Sass package and copy it into our sass folder. Next, we rename the file as _customVariables.scss and add an import statement for _customVariables.scss to app.scss. It’s important to import _customVariables.scss first for reasons I’ll explain shortly.

The last import is an optional _custom.scss file. Many people will include custom CSS rules directly after their import statements or in their app.scss file, but we’re going to separate any custom rules into their own partial.

Notice, we import our _customVariables.scss file first. The reason is that Bootstrap’s variables are set to default! values, so we need to override these values by importing our variables first.


When we edit variables, it’s advisable to make a copy of the original and change the copy. After copying, we just comment out the original variable. That way, we can go back to what it was previously set to in case we don’t like the result. For example, let’s say we want to change the base font size to 20px. First, we’ll look in our _customVariable.scss file. The variables are broken down into sections, and we’re looking for the Fonts section. There, we want the $font-size-base:1rem !default; variable so we can copy it over to our custom file and comment out the original. After that, it’s as simple as changing the value to 20px:

//$font-size-base:1rem !default;

Above, we’ve commented out the original variable and changed the copy.

When trying to customize Bootstrap, bear in mind there are a lot of variables to deal with. When looking for a variable to modify, it’s advisable to make full use of the text editor’s search feature. It’s also a good idea to look over the _customVariables.scss file and get familiar with the variables present.

Another effective method for finding which variables to change is to look at the raw SCSS files that make up Bootstrap before they’re compiled. From there, we can see which variables are used in that module. For example, let’s say we’re not happy with the color of the .navbar-dark element. Instead of trying to figure out which variable we need to change, we can look inside the _navbar.scss file, scroll down (or use the search function) and look for a reference to a color variable.

// navbar-dark
.navbar-dark {
  .navbar-brand {
    color: $navbar-dark-active-color;

    @include hover-focus {
      color: $navbar-dark-active-color;
  // more Sass here

From looking at this rule, we determine the variable we need to change is $navbar-dark-active-color. We would then go into _customVariables.scss, copy/comment out the original variable, and create our own.

When using Bootstrap’s source files, we can also take advantage of its mixins. Not only will they help with understanding how Bootstrap fits together, they may actually help us build our website. For example, let’s look at the @mixin make-container:

@mixin make-container() {
  width: 100%;
  padding-right: ($grid-gutter-width / 2);
  padding-left: ($grid-gutter-width / 2);
  margin-right: auto;
  margin-left: auto;

From this mixin we can see which variables affect our container. We now know we can alter the $grid-gutter-width to make changes to the paddings of a container element.


Using Bootstrap can be complicated, especially for someone who is not familiar with the framework. With the methods I demonstrated, you should be able to establish a Bootstrap Sass setup and customize the framework with ease. Finding the variables you need to change should be more manageable now that you know what to look for. Just remember, your text editor’s search functions are your friend, and when in doubt, looking at the mixins can help.

If you’ve got the basics of Bootstrap under your belt but are wondering how to take your Bootstrap skills to the next level, check out our Building Your First Website with Bootstrap 4 course for a quick and fun introduction to the power of Bootstrap.

Frequently Asked Questions (FAQs) on Bootstrap Sass Installation and Customisation

How Can I Install Bootstrap Sass Using NPM?

To install Bootstrap Sass using NPM, you first need to have Node.js and npm installed on your computer. Once you have these, open your terminal and navigate to your project directory. Then, run the command npm install bootstrap-sass --save. This command will install Bootstrap Sass and save it as a dependency in your package.json file.

What is the Difference Between Bootstrap Sass and Regular Bootstrap?

Bootstrap Sass and regular Bootstrap are essentially the same framework, but they differ in the way they are customized. Regular Bootstrap uses Less for its source CSS files, while Bootstrap Sass uses Sass, a powerful CSS preprocessor that allows for variables, nesting, and more. This makes Bootstrap Sass more flexible and easier to customize.

How Can I Customize Bootstrap Sass?

To customize Bootstrap Sass, you need to override the default variables in the _variables.scss file. This file contains all the default settings for Bootstrap’s styles. You can change the values of these variables to suit your needs. For example, you can change the primary color by setting $primary: #your-color;. After making your changes, compile your Sass files into CSS.

How Can I Compile My Sass Files into CSS?

To compile your Sass files into CSS, you can use a task runner like Gulp or Grunt, or a module bundler like Webpack. These tools will watch your Sass files for changes and automatically compile them into CSS. You can also use a command line tool like sass to manually compile your files.

Can I Use Bootstrap Sass with React?

Yes, you can use Bootstrap Sass with React. To do this, you need to install Bootstrap Sass using npm, import the Bootstrap Sass styles into your React components, and then use the Bootstrap classes in your JSX. You can also use react-bootstrap, a library of Bootstrap components built with React.

How Can I Update Bootstrap Sass?

To update Bootstrap Sass, you can use npm. Open your terminal, navigate to your project directory, and run the command npm update bootstrap-sass. This will update Bootstrap Sass to the latest version.

Can I Use Bootstrap Sass with Angular?

Yes, you can use Bootstrap Sass with Angular. To do this, you need to install Bootstrap Sass using npm, import the Bootstrap Sass styles into your Angular components, and then use the Bootstrap classes in your HTML templates. You can also use ng-bootstrap, a library of Bootstrap components built with Angular.

How Can I Use Bootstrap Sass with Rails?

To use Bootstrap Sass with Rails, you need to add the bootstrap-sass gem to your Gemfile and run bundle install. Then, import the Bootstrap styles in your application.scss file and the Bootstrap JavaScript in your application.js file.

What Are Some Common Issues with Bootstrap Sass?

Some common issues with Bootstrap Sass include problems with installation, issues with compiling Sass files into CSS, and difficulties with customization. These issues can often be resolved by checking your setup, ensuring you have the correct versions of all dependencies, and carefully following the customization instructions.

Where Can I Find More Information on Bootstrap Sass?

You can find more information on Bootstrap Sass on the official Bootstrap website, in the Bootstrap Sass GitHub repository, and in various online tutorials and guides. These resources provide detailed instructions on how to install, customize, and use Bootstrap Sass.

Reggie DawsonReggie Dawson
View Author

Reggie is a longtime Network Admin who has finally seen the error of his ways and has come over to the darkside: development. He likes to hack together web projects in his spare time using Angular, Compass, Sass, Bootstrap, or Foundation.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week