My favored SCSS setup with Bootstrap 4

TL;DR — what you’ll learn here

  • 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.

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!

Image for post
Image for post

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:

Image for post
Image for post

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

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!

Image for post
Image for post

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?

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post
  • All vendor files are stored here.
  • “components” contains custom SCSS components for this project, like “_calendar.scss”.
  • 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. :)

  • 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.

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