How to Customize Bootstrap 4 with Sass

You've integrated Bootstrap 4 and now you might be uncertain as to where and how you can make custom adjustments based on your project needs, right?

Fortunately for you, I have traversed the depths of the Bootstrap 4 Documentation to seek this very answer. Oh, and also, it was like right there and easy to find, so let's get to it!

If you prefer watching video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more awesome videos!

Customizing Bootstrap's Sass Settings

Being that this tutorial is a part of our free bootstrap 4 course, we have already set up a project and integrated the sass version of Bootstrap 4. If you haven't, please visit the course and get yourself up to par!

Bootstrap 4 has a series of variables, mixins and other settings that are predefined when you install it with a package manager. These settings address colors, typography, spacing, and more.

If you want to change these settings, there's a specific file that you can use to redefine their values.

In your code editor, open up the file: /node_modules/bootstrap/scss/_custom.scss.

Here, you will find:

// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override default values
// without modifying source files.

Anywhere after these comments, you can now specify your overrides.

Let's take a real quick look at _variables.scss:

// Table of Contents
//
// Colors
// Options
// Spacing
// Body
// Links
// Grid breakpoints
// Grid containers
// Grid columns
// Fonts
// Components
// Tables
// Buttons
// Forms
// Dropdowns
// Z-index master list
// Navbar
// Navs
// Pagination
// Jumbotron
// Form states and alerts
// Cards
// Tooltips
// Popovers
// Badges
// Modals
// Alerts
// Progress bars
// List group
// Image thumbnails
// Figures
// Breadcrumbs
// Carousel
// Close
// Code

Woah, so that's a lot of settings that we have the ability to control within our _custom.scss file!

Let's take a look real quickly at the color section:

// Colors
//
// Grayscale and brand colors for use across Bootstrap.

// Start with assigning color names to specific hex values.
$white:  #fff !default;
$black:  #000 !default;
$red:    #d9534f !default;
$orange: #f0ad4e !default;
$yellow: #ffd500 !default;
$green:  #5cb85c !default;
$blue:   #0275d8 !default;
$teal:   #5bc0de !default;
$pink:   #ff5b77 !default;
$purple: #613d7c !default;

// Create grayscale
$gray-dark:                 #292b2c !default;
$gray:                      #464a4c !default;
$gray-light:                #636c72 !default;
$gray-lighter:              #eceeef !default;
$gray-lightest:             #f7f7f9 !default;

// Reassign color vars to semantic color scheme
$brand-primary:             $blue !default;
$brand-success:             $green !default;
$brand-info:                $teal !default;
$brand-warning:             $orange !default;
$brand-danger:              $red !default;
$brand-inverse:             $gray-dark !default;

Notice how each of these sass variables has a !default at the end? That's specific to Sass and works opposite of the !important rule. If the variable has not been defined elsewhere, such as in the _custom sass file, then it will default to this value.

Being that this tutorial is a part of a project-based course, let me show you what the layout looks like:

Notice the color scheme and how we have that teal color? Let's make some custom adjustments in the _custom.scss to reflect this:

$green:         #00FFC4;

$brand-primary: $green; 
$link-color:    $green;
$body-bg:       #1A1B1D;

$font-family-sans-serif: "Raleway", Roboto, "Helvetica Neue", Arial, sans-serif;

So, I've set $green to our teal color, and made the $brand-primary and $link-color also to green. By default, I believe they're set to blue.

We also set a body background color and changed the $font-family-sans-serif to use Raleway, which is included in our index.html file.

That's all there is to it for making custom adjustments to the sass settings of Bootstrap 4. 

Making Custom Style Adjustments

Outside of modifying Bootstrap's sass settings, you can create a custom sass file in your project folder. You have to include it after importing the bootstrap sass file.

In the course that this tutorial is related to, we've set all of that up already in the previous section using Gulp.