Overview

Bootstrap 4 CSS source code is written in Sass. You can customize Bootstrap CSS in various ways. A typical workflow is as follows.

1. Make your own Sass file for extension
   1. Initialize customization variables
   2. Import Bootstrap Sass code
   3. (Optional) append your own style
2. Compile Sass source code to CSS
3. Process vendor prefixes with Autoprefixer
4. (Optional) Minify CSS

Tools

Bootstrap Sass customization requires at least two (or three) processing tools. You may also need a build tool.

Sass

Sass has three official implementations: Ruby Sass (original), libsass (C++), and Dart Sass (just released recently). Ruby Sass and libsass are both popular but libsass has been getting major as it is much faster than Ruby Sass. This tutorial uses node-sass, which is an interface of libsass for node.js.

Autoprefixer

Most parts of Bootstrap 4 are written in pure (i.e. no vender prefix) Sass. It relies on Autoprefixer to process vendor prefixes. It runs as a PostCSS plugin on node.js (no alternative).

Supported browsers are written in package.json with browserslist format (see Best Practices and Full List for query syntax). This tutorial borrows the same settings as Bootstrap 4.2 as below. It is referenced by Autoprefixer to add or remove vender prefixes for each CSS property.

# https://github.com/browserslist/browserslist#readme

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

(Optional) CSS minifier

You can optimize CSS output with a CSS minifier. There are a lot of CSS minifiers for various environments (you can use anything you like). This tutorial uses node.js for the working environment. There are several choises for CSS minifiers for node.js.

• clean-css - stand-alone, used for building Bootstrap library
• PostCSS plugins
  • csswring - used in ths tutorial (easy)
  • cssnano - high spec and popular, but slightly difficult and complex

Build tool

You may also need a build tool. You can use anything you prefer (like GNU make). This tutorial recommends node.js-based tools as Autoprefixer (runs only on node.js) is required. There are numbers of build (task runner) tools on node.js (like Webpack, Gulp, Grunt, etc.).

Building this tutorial

This tutorial uses npm CLI for simplicity. Npm is mainly a package manager for node.js but also can be a tiny task runner. You can build this tutorial by yourself as the following instruction.

1. Download zipped source code from GitHub
2. Install required tools with npm install
3. Build the site contents with npm run build (files are generated to ./site/*)
4. Start the development server with npm run start (hosted to http://localhost:8888/)

See "scripts:" field entries of package.json for more commands. These commands are executed with npm run[-script] (⇒ Reference).

Bootstrap Sass code

Bootstrap Sass source code consists of multiple .scss source files. They are classified into two types.

• Library targets - bootstrap.scss, bootstrap.grid.scss, and bootstrap.reboot.scss
• Partials - module files (each file begins with underscore: e.g. _variables.scss)

Use @import statement to use (import) Sass code. You can import whole Bootstrap code with @import "{path}/bootstrap";. Or you can also import by partials as @import "{path}/variables"; (for _variables.scss). You do not have to type underscores.

Customizing Bootstrap

Bootstrap uses a lot of (over 500!) Sass variables (with prefix $ as Sass syntax) for the library implementation and also for customization. All variables are defined in _variable.scss with variable default syntax !default.

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
...
$body-bg:                   $white !default;
$body-color:                $gray-900 !default;
...

To customize Bootstrap, you define these variables with appropreate values you want first and import Bootstrap next. For example, you can change the basic page colors as below.

// Initialize variable to customize before importing Bootstrap
$body-bg: ivory;        // or #fffff0;
$body-color: navy;      // or #000080;

// Import Bootstrap (whole library)
@import "bootstrap/scss/bootstrap";

You can also customize Bootstrap with importing by partials. See Importing Sass partials for detail.