Bootstrap - Creating Custom Bootstrap Builds Using Sass Variables

Introduction

Bootstrap is one of the most popular front-end frameworks for developing responsive and mobile-friendly websites. By default, Bootstrap provides a complete collection of CSS styles and JavaScript components. While this is convenient, many projects only require a subset of these features. Including the entire Bootstrap framework can increase file size and may include styles that are never used.

To solve this problem, Bootstrap allows developers to create custom builds using Sass (Syntactically Awesome Style Sheets). Sass is a CSS preprocessor that enables developers to modify Bootstrap's source code before compiling it into CSS. Through Sass variables, developers can customize colors, typography, spacing, borders, breakpoints, and many other design elements without manually editing Bootstrap's core files.

Creating a custom Bootstrap build helps developers design unique user interfaces while improving website performance and maintainability.

What is Sass?

Sass is a CSS preprocessor that extends standard CSS by providing additional programming-like features. Instead of writing repetitive CSS code, developers can use variables, nesting, functions, loops, and mixins.

Bootstrap itself is built using Sass, making it easy for developers to customize every aspect of the framework before generating the final CSS file.

Some advantages of Sass include:

  • Reusable variables

  • Better code organization

  • Easier maintenance

  • Reduced duplication

  • Faster development

  • Greater customization

What are Sass Variables?

Variables in Sass store reusable values that can be referenced throughout the stylesheet.

Instead of repeating the same color or spacing value multiple times, developers define it once and reuse it wherever needed.

Example:

$primary: #1a73e8;
$font-size-base: 1rem;
$border-radius: 10px;

Whenever these variables are updated, every related style changes automatically after recompilation.

Why Create a Custom Bootstrap Build?

Using Bootstrap without customization often results in websites that look similar because they use the default colors, fonts, and spacing.

Custom builds allow developers to:

  • Create a unique visual identity

  • Improve loading speed

  • Remove unused components

  • Match company branding

  • Simplify maintenance

  • Increase development efficiency

Instead of overriding hundreds of CSS rules later, developers simply modify Bootstrap variables before compiling.

Bootstrap Source Files

Bootstrap provides source files that contain numerous Sass partials.

A simplified folder structure looks like:

bootstrap/
│
├── scss/
│   ├── _variables.scss
│   ├── _functions.scss
│   ├── _mixins.scss
│   ├── _buttons.scss
│   ├── _forms.scss
│   ├── _grid.scss
│   ├── _navbar.scss
│   ├── _utilities.scss
│   └── bootstrap.scss

Each file represents a specific Bootstrap component.

Developers can import only the files they require.

Installing Bootstrap Source Files

Bootstrap can be installed using npm.

Example:

npm install bootstrap

This installs all Bootstrap source files, including the Sass files needed for customization.

Creating a Custom Sass File

Instead of modifying Bootstrap files directly, developers create their own custom Sass file.

Example:

// Custom variables

$primary: #008060;
$secondary: #f39c12;
$border-radius: 12px;

// Import Bootstrap

@import "bootstrap/scss/bootstrap";

Bootstrap automatically uses the customized variables during compilation.

This approach keeps the original Bootstrap files unchanged.

Customizing Colors

Bootstrap provides several predefined theme colors.

These include:

  • Primary

  • Secondary

  • Success

  • Danger

  • Warning

  • Info

  • Light

  • Dark

Changing the primary color is simple.

Example:

$primary: #2e7d32;

After compilation, all components using the primary color update automatically.

These include:

  • Buttons

  • Links

  • Progress bars

  • Alerts

  • Badges

  • Navigation elements

Customizing Typography

Bootstrap allows customization of fonts and text appearance.

Example:

$font-family-base: "Roboto", sans-serif;

$font-size-base: 1.1rem;

$headings-font-weight: 700;

This changes:

  • Body font

  • Heading font

  • Text size

  • Font weight

without writing additional CSS.

Customizing Border Radius

Rounded corners can also be adjusted.

Example:

$border-radius: 0.75rem;

This affects:

  • Buttons

  • Cards

  • Forms

  • Alerts

  • Badges

The entire website maintains consistent rounded corners.

Customizing Spacing

Bootstrap uses spacing variables for margins and padding.

Example:

$spacer: 1.5rem;

Increasing the spacer value automatically adjusts spacing utilities across the project.

Customizing Grid Breakpoints

Bootstrap's responsive system depends on breakpoints.

Default breakpoints include:

Breakpoint Width
xs 0px
sm 576px
md 768px
lg 992px
xl 1200px
xxl 1400px

Developers can modify these breakpoints.

Example:

$grid-breakpoints: (
    sm: 640px,
    md: 800px,
    lg: 1024px,
    xl: 1280px
);

This creates a responsive layout tailored to specific project requirements.

Removing Unused Components

Bootstrap does not require importing every component.

Instead of importing the complete framework:

@import "bootstrap";

Developers can selectively import components.

Example:

@import "functions";
@import "variables";
@import "mixins";
@import "grid";
@import "buttons";
@import "forms";

Unused components like:

  • Carousel

  • Toast

  • Tooltip

  • Popover

can be omitted.

This significantly reduces the final CSS file size.

Creating Custom Theme Colors

Developers can add entirely new theme colors.

Example:

$custom-colors: (
    "brand": #ff5722,
    "ocean": #0077b6
);

These colors can be merged with Bootstrap's existing color system to create new utility classes.

Compiling the Custom Build

After making changes, Sass compiles the source into a CSS file.

Example command:

sass custom.scss custom.css

The generated CSS includes only the customized Bootstrap styles.

Benefits of Custom Bootstrap Builds

Creating a custom Bootstrap build offers several advantages:

  • Smaller CSS files

  • Faster page loading

  • Easier branding

  • Cleaner code

  • Better maintainability

  • Improved scalability

  • Reduced CSS overrides

  • Consistent design system

  • Better performance

  • Easier future updates

Best Practices

To ensure maintainable and efficient custom Bootstrap builds, developers should follow these practices:

  • Never edit Bootstrap's original source files directly.

  • Store all customizations in a separate Sass file.

  • Override variables before importing Bootstrap.

  • Import only the components required for the project.

  • Use meaningful variable names for custom values.

  • Keep branding colors consistent across all components.

  • Test responsive layouts after modifying breakpoints.

  • Organize custom Sass files into folders for large projects.

  • Recompile Bootstrap whenever variables are updated.

  • Document all customizations for easier collaboration and maintenance.

Common Mistakes

Developers often encounter issues while customizing Bootstrap. Some common mistakes include:

  • Editing Bootstrap source files directly, making upgrades difficult.

  • Overriding variables after importing Bootstrap, which prevents changes from taking effect.

  • Importing unnecessary components, resulting in larger CSS files.

  • Using inconsistent color values instead of centralized variables.

  • Forgetting to recompile Sass after making changes.

  • Removing essential components required by the application.

  • Ignoring browser testing after customization.

  • Changing breakpoints without verifying responsive behavior.

  • Creating duplicate custom variables that conflict with Bootstrap defaults.

  • Failing to organize Sass files, leading to difficult maintenance.

Real-World Applications

Custom Bootstrap builds are widely used in professional web development. Some common applications include:

  • Corporate websites that require company-specific branding.

  • E-commerce platforms with customized product layouts and color schemes.

  • Educational portals that follow institutional design guidelines.

  • Healthcare applications requiring accessible and consistent user interfaces.

  • Government websites with standardized branding and responsive layouts.

  • Software-as-a-Service (SaaS) dashboards featuring unique themes and optimized performance.

  • Content management systems with reusable UI components.

  • Startup websites aiming for a distinctive appearance while leveraging Bootstrap’s responsive framework.

  • Internal business applications where only selected Bootstrap components are needed.

  • Large enterprise projects that maintain centralized design systems across multiple teams.

Conclusion

Creating custom Bootstrap builds using Sass variables is a powerful technique for tailoring Bootstrap to the specific needs of a project. By modifying variables instead of editing the framework directly, developers can change colors, typography, spacing, breakpoints, and component styles while preserving Bootstrap’s upgradeability. Selectively importing only the required components also results in smaller CSS files and better website performance. This approach promotes clean code, consistent branding, and easier long-term maintenance, making it a best practice for modern web development.