Mastering Bootstrap 4 Sass: Design, Customization, and Improvement Tips

Getting into Bootstrap v4 Sass

Bootstrap's Sass files reside in the scss directory; the name scss is used because the SCSS syntax is closer to CSS and therefore more popular.

SCSS files come in two forms: those prefixed with an underscore (e.g., _variables.scss) are meant to be imported and are not compiled into separate CSS files, while files without an underscore (e.g., bootstrap.scss) are compiled. For example, having _a.scss and b.scss results in only b.css, and b.scss can import _a.scss using @import a (the underscore and extension can be omitted).

Compiling the entire scss directory produces four CSS files: bootstrap.css, bootstrap-flex.css, bootstrap-reboot.css, and bootstrap-grid.css, each generated from a corresponding SCSS file.

bootstrap-reboot provides reset styles, and bootstrap-grid provides the grid system; they can be used independently when you only need one of them.

bootstrap vs. bootstrap-flex: the former uses traditional layout, while the latter uses Flexbox. The file bootstrap-flex.scss sets $enable-flex: true before importing bootstrap.scss .

Opening bootstrap.scss reveals six main sections:

variable & mixin – imports variable and mixin files; _mixin.scss imports all files in the mixin directory.

reset – imports normalize and print files.

core – base styles such as grid, form, table, button, etc.

component – component files like nav, card, breadcrumb, etc.

component js – JS‑controlled component files like modal, tooltip, etc.

utility – global utility classes such as clearfix, center‑block, etc.

How to use and modify Bootstrap v4 styles

If you are comfortable with Sass, work directly with the Sass source; otherwise you can use the compiled bootstrap.css found in dist/css.

Using plain CSS:

Include <link href="bootstrap.css" rel="stylesheet" /> in your HTML.

To customize, create a separate stylesheet (e.g., style.css) that overrides Bootstrap; avoid editing bootstrap.css directly.

For non‑destructive customization with Sass, place all Bootstrap SCSS files in a folder and add custom variable and mixin files before importing Bootstrap:

scss
bootstrap (original scss files)
    bootstrap.scss
    ...
    mixin/
        ...
_custom-variables.scss   // custom variables or overrides
_custom-mixin.scss        // custom mixins
style.scss

Example style.scss:

@charset "UTF-8";
// import files
@import "custom-variables";
@import "custom-mixin";
@import "bootstrap/bootstrap";

Alternatively, you can edit bootstrap.scss directly by removing unwanted @import statements, but creating a new file is safer for future upgrades.

How to improve Bootstrap v4 Sass design

Based on personal experience, the author suggests several improvements:

Organize component files into a dedicated component folder and utility files into a utility folder for clearer structure.

Introduce a percentage‑based design system (e.g., % placeholders) to simplify style composition.

Provide a single SCSS file that bundles variables and mixins for easier imports.

Place component‑specific variables inside each component’s SCSS file rather than a global variables file, reducing bloat.

Reduce the number of mixins; some, like a size mixin, may be excessive.

The author’s own Sass library “sandal” implements many of these ideas, and the mobile UI library “sheral”, built on sandal, is referenced for further exploration.