Building Bootstrap 4 layouts, part 6: Working with SCSS in Bootstrap 4

In this sixth of 20 articles in the Building Bootstrap 4 Layouts article series, we’ll look at altering the Checkout form example from the Custom components section on the Bootstrap 4 website.

Photo by Kenzie Broad on Unsplash.com

Why Koala?

Well, if you’ve ever tried working with SCSS, you might have found out that it might be difficult to set up, especially for beginners.

That’s why I’ve decided to use the Koala app in this article.

Why SCSS?

The obvious question is: if it’s not so easy to set up, maybe it’s not meant for beginners to tinker with it?

Why use SCSS with Bootstrap 4 in the first place?

The answer is: it’s an easy way to quickly change the styles on your layouts, en masse.

You’ll see it in action shortly.

Installing and using Koala

To install, simply click the big green Download button, then install it just like any other program on your machine.

While Koala is installing, you might use the spare time to save the official Checkout form example layout form Bootstrap 4.3 docs.

To easily save the layout, open the above link in Chrome, then follow the instructions that can be found here.

I saved the theme into a new folder called checkout-example.

Here’s the structure of the folder, after I save the theme:

checkout-example/
  ├── Checkout example · Bootstrap_files/
  │   ├── bootstrap.bundle.min.js.download
  │   ├── bootstrap.min.css
  │   ├── bootstrap-solid.svg
  │   ├── form-validation.css
  │   ├── form-validation.js.download
  │   └── jquery-3.3.1.slim.min.js.download
  └── Checkout example · Bootstrap.html

As we can see, there’s no SCSS in sight. We’ll need to fix that next.

To use this folder as a starting point, you can download it here.

Adding Bootstrap 4.3 SCSS files

To start, download the source files from getBootstrap.com.

Once unzipped, the structure of these source files looks as follows:

bootstrap/
├── dist/
│   ├── css/
│   └── js/
├── site/
│   └──docs/
│      └── 4.3/
│          └── examples/
├── js/
└── scss/

To read up a bit more on the above file structure, have a look at the Bootstrap source code section.

What we will do with the above download is, we’ll copy only the scss folder. Then we’ll paste that folder into our checkout-example folder, so that the updated structure looks like this:

checkout-example/
  ├── Checkout example · Bootstrap_files/
  │   ├── scss/
  │   |     ├── mixins/
  │   |     ├── utilites/
  │   |     ├── vendor/
  │   |     ├── _alert.scss
  │   |     ├── _badge.scss
  │   |     ├── _breadcrumb.scss
  │   |     └── ...etc...
  │   ├── bootstrap.bundle.min.js.download
  │   ├── bootstrap.min.css
  │   ├── bootstrap-solid.svg
  │   ├── form-validation.css
  │   ├── form-validation.js.download
  │   └── jquery-3.3.1.slim.min.js.download
  └── Checkout example · Bootstrap.html

Now that we’ve pasted in the SCSS folder, we need to see how Koala will compile it.

Compiling SCSS with Koala app

We’ll compile all our SCSS files from the scss folder into the bootstrap.min.css file, with the help of the Koala app.

To start, open the Koala app.

Next, press the plus sign and locate the SCSS folder:

Now we’ll need to update the _variables.scss file.

This file is known as a partial file: the _ character in front of the file name is a convention in SCSS that shows partial files.

When you import partial SCSS files, you don’t have to write the _ or the .scss extension:

/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
//...etc (code below skipped for brevity)

Now that we’ve saved everything, let’s open the Koala app and hit the Refresh button.

You’ll see three new files, grayed out.

They’re grayed out because we still need to choose how to compile them.

To make that choice, just click on a file, and a sidebar will open. Click the auto-compile option, so that you don’t have to do this again. It will compile automatically from now on.

We’ll repeat the same thing for the other two grayed-out files: bootstrap-reboot.css, and bootstrap-grid.css.

Now let’s open the _custom_variables.scss file and make some changes.

Changing default Bootstrap variables

When you open the _custom_variables.scss file, you’ll see that there are a bunch of variables inside it, used for different settings.

Let’s take the easy route and update the $border-radius variable to zero, like this:

//$border-radius:               .25rem !default;
$border-radius: 0 !default;

As we can see, we’ve first commented out the original variable, and then we updated the variable with the custom value on the line below. That way we can easily get back to the original variable if there is a need to do so.

Now we need to press compile on any single button, and all three specified CSS files will be compiled.

What we’re expecting from this update to the variable is that our Checkout example layout’s form input borders will no longer be rounded. Instead, they should be squared.

All we have to do now is reference these files in our template’s HTML file, on line 14:

<link href="./CheckoutexampleBootstrap_files/scss/bootstrap.min.css" rel="stylesheet">

If you’ve done everything right, you should see the updated Checkout example layout:

Hopefully you can appreciate how easy it was to change some global, site-wide styles this way.

Also, this technique allows us to get rid of redundant CSS even before it compiles: We can simply comment-out the unused SCSS partials.

For example, if we know for a fact that we will not be using, for example, the alert component, we can simply comment out its import from the bootstrap.scss file:

// ...code skipped for brevity
@import "badge";
@import "jumbotron";
//@import "alert";
@import "progress";
@import "media";
@import "list-group";
// ...code skipped for brevity

Conclusion

Once you’ve set up SCSS on your machine - which should be easy with apps like Koala - it becomes a breeze to do two important things:

• trim your unused CSS
• easily make global changes to your layouts

This powerful approach to building Bootstrap layouts allows us to further speed up our layout customization.

In the next article in this article series, we’ll look at improving our layouts with containers, images, and typography.

The layout we built in this article is available as a zip here.