Chapter 5: Bootstrap Sass Installation and Customization

by Reggie Dawson

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.

Node

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.

Customize

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;
$font-size-base:20px;

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.

Conclusion

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.