Bootstrap Sass

Bootstrap Sass Overview

Bootstrap's scss folder contains dozens of partial files: functions, variables, mixins, and one file per component or utility category. Importing the full bootstrap.scss pulls in everything, but you can import individual partials for a smaller, more targeted build.

Sass maps like $theme-colors, $spacers, and $grid-breakpoints drive many of Bootstrap's generated utility classes, so modifying a map before importing the relevant partial regenerates that entire category of classes—for example, adding a key to $theme-colors automatically creates new bg-*, text-*, and btn-* classes for it.

Bootstrap Sass Example

// custom.scss
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';

$theme-colors: map-merge($theme-colors, (
  "brand": #ff6b6b,
));

@import 'bootstrap/scss/variables-dark';
@import 'bootstrap/scss/maps';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/root';
@import 'bootstrap/scss/reboot';
@import 'bootstrap/scss/grid';
@import 'bootstrap/scss/utilities';

.custom-banner {
  @include media-breakpoint-up(md) {
    padding: 3rem;
  }
}

This example imports only the Sass partials needed for functions, variables, the grid, and utilities, keeping the final CSS smaller than importing the entire framework. Adding a 'brand' key to $theme-colors before the maps and utilities are generated creates new theme classes for it automatically. The custom-banner rule shows using Bootstrap's media-breakpoint-up mixin to write custom CSS that matches the framework's own breakpoint values.

Top 10 Bootstrap Sass Examples

These are the Sass techniques you'll use most often when working with Bootstrap's source directly.

Popular Real-World Bootstrap Sass Examples

These Sass patterns are common when teams build a fully custom Bootstrap theme for production.

Best Practices

• Import functions, variables, and maps partials before overriding any Sass maps or variables.
• Use map-merge to extend maps like $theme-colors and $spacers instead of redefining them entirely.
• Use Bootstrap's built-in mixins (media-breakpoint-up, media-breakpoint-down) for custom CSS instead of hardcoding breakpoint values.
• Import only the partials your project actually uses when bundle size matters.
• Use color functions like tint-color and shade-color to generate consistent hover and active states.
• Keep a single, well-organized custom.scss entry point rather than scattering overrides across files.
• Recompile and visually check every affected component after changing a shared Sass map.

Common Mistakes

• Redefining an entire Sass map instead of using map-merge, accidentally removing default keys.
• Importing partials out of order, causing missing variable or function errors during compilation.
• Hardcoding pixel breakpoint values instead of using Bootstrap's mixins, causing drift from the grid's actual breakpoints.
• Forgetting that some values depend on functions that must be imported first.
• Not recompiling after changing variables, then wondering why nothing visually changed.
• Importing the entire framework when only a handful of components were actually needed.

Key Takeaways

• Bootstrap's Sass source is organized into many partials for variables, mixins, functions, and components.
• Sass maps like $theme-colors and $spacers drive entire categories of generated utility classes.
• map-merge extends existing maps without removing their default values.
• Breakpoint mixins keep custom CSS consistent with the framework's own responsive scale.
• Selective partial imports reduce final CSS bundle size for smaller projects.