Sass variables

Sass variables of Bootstrap source code are defined in _variables.scss with !default option. You can change or modify these variables to customize Bootstrap styles.

Basic parameters

Variables below are basic parameters for whole style settings.

• $font-size-base : Base font size (default: 1rem), affects all font sizes of Bootstrap styles
• $spacer : Unit length for Spacing utilities (default: 1rem)

// Use 10% smaller fonts
$font-size-base: 0.9rem;

// import Bootstrap
@import "bootstrap/scss/bootstrap";

Changing customization presets

Variables which starts with $enable- are built-in customization presets (see Sass options for the full listing). For example, gradients and shadows are disabled as default (on version 4.1.1). You can enable those options with an extension code as bellow.

// initialize customization variables
$enable-gradients: true;
$enable-shadows: true;

// import Bootstrap
@import "bootstrap/scss/bootstrap";
...

See Gradation and shadow effects to check differences of visual representations.

Modifying map variables

Sass suppots various types of variables (see Data Types). Most variables are scalar (numbers, strings, colors, booleans, and null). But variables below are defined as key-value maps.

• $grays : Gray scale presets
• $colors : Basic colors (blue, indigo, purple, ...)
• $theme-colors : Bootstrap theme colors (primary, secondary, success, ...)
• $spacers : Preset values of Spacing utitilies
• $sizes : Preset values of Sizing utitilies
• $grid-breakpoints : Grid breakpoint (viewport width) presets
• $container-max-widths : Grid container width for each breakpoints

You can also modify these variables. Adding and changing values are easy.

// Example: Modify $theme-colors
$theme-colors: (
  // change "success" from green to teal
  "success": #20c997,
  // add "custom" to orange
  "custom": #fd7e14
);

// import Bootstrap
@import "bootstrap/scss/bootstrap";

Below are live alert samples (compare with Bootstrap default colors ⇒ see Official document examples).

You can also remove existing map entries using Sass builtin functions (search map-remove($map, $keys...) of map-functions). But you have to import partials invidually. See Remove from map of the official document for detail.