Customizing Bootstrap with Sass Variables
For deeper customization than utility classes allow, Bootstrap is built with Sass, letting you override its default variables — like colors, fonts, and spacing scale — before compiling your own custom CSS build.
This approach lets you change Bootstrap's entire look (like the primary color or default border radius) in one place, rather than overriding CSS with !important everywhere.
// custom.scss
$primary: #ff6600;
@import "bootstrap/scss/bootstrap";Overriding variables
Create a custom Sass file that first sets variables like $primary or $border-radius, then imports Bootstrap's source Sass files, so your values replace the defaults before Bootstrap compiles.
Building the project
Install Bootstrap via npm (npm install bootstrap), then use a Sass compiler (like the sass npm package or a bundler's Sass loader) to compile your custom.scss file into a final CSS file to link in your HTML.
// custom.scss
$primary: #ff6600;
$border-radius: 1rem;
@import "bootstrap/scss/bootstrap";A compiled CSS file where .btn-primary and .bg-primary now use orange instead of the default blueSetting $primary before importing Bootstrap's Sass overrides the default primary color used across all components.
npm install bootstrap sass
npx sass custom.scss custom.cssGenerates custom.css containing your customized version of BootstrapThe sass command compiles your custom.scss (which imports and overrides Bootstrap) into a regular CSS file you can link like any stylesheet.
Key points
- Bootstrap's Sass source lets you override default variables before compiling.
- Variables must be set before the @import of Bootstrap's Sass files.
- Common variables to customize include $primary, $font-family-base, and $border-radius.
- You need a Sass compiler to turn your custom .scss file into usable CSS.