My favored SCSS setup with Bootstrap 4

  • How I integrate Bootstrap 4 and structure my SCSS in small to medium projects.

You can find this setup as an example on github:

Edit August 2018: You can find this setup within a custom Gatsby starter in this repository of mine.

Please note that I used this repo also as an example for my last article about Setting up Brunch with Bootstrap 4, so that’s the only reason it’s based on Brunch.

First things first

I already worked with Bootstrap a few times in private projects (e.g. and I really, really like it! It’s comprehensible and easy to get started with, even for a beginner. It’s been love at the first site!

My requirements and how I use Bootstrap

I‘m using a specific setup and structure for my Bootstrap and SCSS in general. I want to:

  • use only selected components of Bootstrap instead of having the whole Bootstrap CSS in production
  • customize Bootstrap easily without touching the Bootstrap core files or overwriting styles over and over again
  • getting a neat and clean CSS in the end :)

My folder and file structure

How my setup looks in the end and how I like to work with it:

Directory “scss”

There shouldn’t be SCSS files directly in this directory other than the _variables.scss. I prefer to use the variables which are provided by Bootstrap. Only in cases there’s nothing to be used from the Bootstrap core, I declare a custom variable in _variables.scss

Directory in “scss”: Bootstrap

Bootstrap can be used very modular. I don’t import the complete Bootstrap CSS. Instead I use import in the _config.scss to only get the components I want to use. In the end my CSS files only contains what I really need and use. Neat and clean - that’s how I like it!

Bootstrap uses !default on each variable, which makes customizing very easy. It’s the opposite of the notorious !important: While !important is like “Oh, there’s a rule for this? I don’t care, use this!”, a variable with !default will only get defined by SASS if it isn’t already set.

Take the variable $enable-rounded: true !default; as example: It’s set in Bootstrap and rounds all the corners. And if I don’t want rounded corners? Simple: I write $enable-rounded: false; in the pre_default file. So when SASS is compiling the Bootstrap variables, $enable-rounded is already set and won’t be touched. I didn’t have to overwrite anything! Neat, huh?

Directory in SCSS: bootstrap_ext

I customize and extend styles in Bootstrap in separate files, which are stored in a special folder. The file is named like the Bootstrap component I’m changing or extending.

Suppose I want to change the border width for all buttons and add a class for dark buttons: I create a file _button.scss — that’s the name of the respective Bootstrap component — in the “bootstrap_ext” directory and adapt the style like this:

With this structure it’s easy to keep a clear overview where a style comes from and what Bootstrap component it extends or is based on.

From here it’s up to you how to create your structure. In a pet project I’m working on, I’m using this structure:

Directory “vendor”

  • All vendor files are stored here.

Directory “components”

  • “components” contains custom SCSS components for this project, like “_calendar.scss”.

Directory “views”

  • In “views” I place styles which are not reusable and specific for a single view. I prefer to work in components, so there shouldn’t be much in here.


That’s it! My basic SCSS setup with Bootstrap 4. :)

Things I learned

  • I still love Bootstrap very much!
  • I like my styles neat and clean
  • I’m getting a hang on component based SCSS (and I just learned that’s a legit term)




Frontend Developer with a special love for JavaScript and Unit Testing. Passionated about communities.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Evolution of Android Architecture Patterns [ MV * (C, P, VM, I) | JetPack] — U Want To Learn

Announcing Flutter 2

Python Programming: A Beginner’s Guide

Demo Day Spring 2018 Event Recap

Codewars Challenge — A Walkthrough

What happens when you type in your browser and press Enter

10 Tips to clean up your development mac

Supercharge Your Stylesheets with CSS Variables

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mirjam Aulbach

Mirjam Aulbach

Frontend Developer with a special love for JavaScript and Unit Testing. Passionated about communities.

More from Medium

Implementing Link Previews with Cloudflare Pages & Functions

Introduction to KoaJS

Javascript Private Properties, setting and getting errors!

Play To Learn Story

My thoughts on Sublime vs. Visual Studio Code for Javascript/NodeJS projects