Frontend
Oct 07. 2018 · by Helge Sverre

How to use Bootstrap properly

Bootstrap is a popular CSS Framework that features a 12-column grid system, components such as tables, buttons, cards etc, developers like me use bootstrap because it greatly speeds up development of websites and applications because you don't have to reinvent the wheel every time (grids, buttons, list reset styling).

Bootstrap Bootstrap Everywhere

The problem with bootstrap is that when beginners use it, they usually pull it straight from the CDN without any customization or tweaking, or even worse, they try to override the styles in the CDN version of bootstrap, by placing them in a separate file usually with overly specific selectors or using !important.

Speaking from (in)experience, this is a pretty shite way to go about using Bootstrap, because instead of letting bootstrap help you develop your site faster, it will slow you down, and you will start to hate it because you'll have to fight the compiled styles every step of the way.

So what is the right way to use Bootstrap?

Importing it with Sass and tweaking variables until it fits your needs!

src/_bootstrap.scss
SCSS
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
//@import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
//@import "~bootstrap/scss/transitions";
//@import "~bootstrap/scss/dropdown";
//@import "~bootstrap/scss/button-group";
//@import "~bootstrap/scss/input-group";
//@import "~bootstrap/scss/custom-forms";
//@import "~bootstrap/scss/nav";
//@import "~bootstrap/scss/navbar";
//@import "~bootstrap/scss/card";
//@import "~bootstrap/scss/breadcrumb";
//@import "~bootstrap/scss/pagination";
//@import "~bootstrap/scss/badge";
//@import "~bootstrap/scss/jumbotron";
//@import "~bootstrap/scss/alert";
//@import "~bootstrap/scss/progress";
//@import "~bootstrap/scss/media";
//@import "~bootstrap/scss/list-group";
//@import "~bootstrap/scss/close";
//@import "~bootstrap/scss/modal";
//@import "~bootstrap/scss/tooltip";
//@import "~bootstrap/scss/popover";
//@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/utilities";
//@import "~bootstrap/scss/print";

Here is an example of a variable.scss file, you can find all the available variables that you can change by checking out the theming bootstrap documentation

src/_variables.scss
SCSS
// Colors
$color-white: #FFFFFF;
$color-light: #FAFAFA;
$color-grey: #888888;
$color-brown: #B18D5B;
$color-black: #000000;

$theme-colors: (
        "white": $color-white,
        "light": $color-light,
        "grey": $color-grey,
        "brown": $color-brown,
        "black": $color-black,
);

// Body
$body-bg: $color-light;
$body-color: $color-grey;

// Misc
$box-shadow: 0 0 50px rgba(0, 0, 0, 0.25);

// Typography
$font-family-sans-serif: 'Source Sans Pro', sans-serif;

// Button
$btn-border-radius: 0;
$btn-border-width: 2px;
$btn-font-weight: bold;
src/app.scss
SCSS
// Remember to import variables before bootstrap
@import 'variables';
@import 'bootstrap';

We import the variables before bootstrap because every variable is defined as a "variable default".

You can assign to variables if they aren't already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won't be re-assigned, but if it doesn't have a value yet, it will be given one.

Sass documentation

I hope that made some sense and helped you on your way.

Next: How to use PurgeCSS with Laravel Mix in a Craft CMS Project.
Previous: How to generate a link to a single in Craft CMS
References and links in this article
Bootstrap Documentation Sass Tutorial (Google) Theming Boostrap Docs