My favored SCSS setup with Bootstrap 4
Tags: scss, bootstrap4, frontend, css
Published: 2020-03-20 18:02:13

---
title: My favored SCSS setup with Bootstrap 4
published: true
description: How I integrate Bootstrap 4 and structure my SCSS in small to medium projects.
tags: scss, bootstrap4, frontend, css
---

*This article is originally from Aug 25, 2017. I'm moving my content from [medium](https://medium.com/@programmiri/my-favored-scss-setup-with-bootstrap-4-547e9ea290f8) to dev.to*

You can find this setup as an example on github: [https://github.com/programmiri/brunch-setup-bootstrap4](https://github.com/programmiri/brunch-setup-bootstrap4)

Please note that I used this repo also as an example for an article of mine about [Setting up Brunch with Bootstrap 4](https://medium.com/@programmiri/my-favored-scss-setup-with-bootstrap-4-547e9ea290f8), 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. [hundetrainer-barcamp.de](http://hundetrainer-barcamp.de)) 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!

![Screenshot from tweet saying that I am falling in love with bootstrap](https://dev-to-uploads.s3.amazonaws.com/i/dpl95bdey0eh0qnn3x4t.png)

<figcaption>https://twitter.com/mirjam_diala/status/591253430464811008</figcaption>

## 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:

```
├── app/
│   ├── assets/
│   ├──  js/
│   ├──  scss/
│        └── bootstrap/
│            └── _config.scss
│            └── _pre_defaults.scss
│        ├──  bootstrap_ext/
│            └── _button.scss
│        ├──  _variables.scss
│   ├──  index.scss
│   ├──  index.js/
│   ├── file22.ext
│   ├──  file23.ext

```

### 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

#### config.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! 

```scss
// READ MORE
// https://github.com/twbs/bootstrap
// https://get.getbootstrap.com

@import "pre_default";

// Core variables and mixins
// state in March 2018

// *** Core with grid
@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";

// *** Standards
// @import "tables";
// @import "forms";
@import "buttons";

// *** Components
// @import "transitions";
// @import "dropdown";
// @import "button-group";
// @import "input-group";
// @import "custom-forms";
@import "nav";
@import "navbar";
// @import "card";
// @import "breadcrumb";
// @import "pagination";
// @import "badge";
// @import "jumbotron";
// @import "alert";
// @import "progress";
// @import "media";
// @import "list-group";
// @import "close";

// *** Components w/ JavaScript
// @import "modal";
// @import "tooltip";
// @import "popover";
// @import "carousel";

// *** Utility classes
@import "utilities/align";
@import "utilities/background";
@import "utilities/borders";
// @import "utilities/clearfix";
@import "utilities/display";
// @import "utilities/embed";
@import "utilities/flex";
// @import "utilities/float";
@import "utilities/position";
@import "utilities/screenreaders";
@import "utilities/spacing";
@import "utilities/text";
@import "utilities/visibility";

// *** Print classes
@import "print";


// *** READ MORE
// https://github.com/twbs/bootstrap
// Based on Bootstrap v4.0.0

@import "pre_default";
```

#### pre_default.scss
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?

```scss
// Example for the use of pre_default

$enable-rounded: true;
```


### 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:

```scss
// Example for overwriting and extending bootstrap components

.btn {
  $button-border-width: 2px;

  border-width: $button-border-width;

  &.btn-dark {
    background-color: $black;
    border-color: $black;
    color: $white;

    &:hover {
      background-color: $white;
      color: $black;
    }
  }
}
```

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. As example, in a pet project I worked on, I used this structure:

```
├── css/
│   ├── bootstrap/
│   ├── bootstrap_ext/
│   ├── components/
│   ├── vendor/
│   ├── views/
│   ├── _variables.scss
│   ├── app.scss

```
### 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.

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