Customize your project's Bootstrap

2 min read

Every Sass variable in Bootstrap includes the !default flag allowing you to override the variable’s default value in your own Sass without modifying Bootstrap’s source code.

You can find the complete list of Bootstrap’s variables in scss/_variables.scss.

Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap’s Sass files.

In this example we'll override the default breakpoints and add additional ones. We'll also theme Bootstrap by changing the colors to match our projects brand.

// Your variable overrides
$theme-colors: (
  "primary": #2196F3,
  "secondary": #C4C4C4,
  "success": #4CAF50,
  "info": #9C27B0,
  "warning": #FF9800,
  "danger": #F51C23,
  "spot": #F37E22
)
$grid-breakpoints: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
);

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

 

If your project does not utilize Sass, you can also compile the customized Sass file into CSS yourself and use that.

For this you will need Sass installed.

$ sudo apt install ruby-sass

Then just target your customized Sass file and the desired output file. Use --style compressed to minify the file.

$ sass bootstrap-customized.scss bootstrap.min.css --style compressed