Image for post
Image for post

Advanced Bootstrap part 1: You can’t touch this

TL/DR

How to properly include Bootstrap into your project using Gulp while keeping it isolated, upgradable and compilable.

First, two big no-no’s

Image for post
Image for post
Rules of bootstrap — Fight Club
  1. Don’t manually copy/paste the bootstrap source to your project.

In my early days, I would copy over the entire Bootstrap source in my project, because it seemed the only logical way. Apparently, it’s possible to keep Bootstrap in your npm packages so you can upgrade it with a single npm command, and avoid importing it using crazy paths that point to your node_modules directory. Read on.

2. Don’t include the full bootstrap.min.css file in your HTML

You won’t have access to Bootstrap’s SASS variables and you won’t be able to remove components you don’t use. You’ll end up with much more CSS than what you actually need. That’s only good for prototyping.

Let’s begin

Setup your project’s package.json as described in the npm documentation and add the bootstrap-sass npm package

$ npm install --save bootstrap-sass

You will need thegulp and gulp-sass packages in order to setup your tasks for SASS compilation, so let’s get those installed as well

$ npm install --save gulp gulp-sass

Make a gulpfile.js in the root of your project, and add the following

We’re there, your SASS build task is complete. Please pay attention to line 32 of the script above. What this will do is it will bring over the Bootstrap source during SASS compilation time; this way you can customize variables without having to copy the entire Bootstrap source in your project, or without having to use long and complex import paths.

To gracefully override the main bootstrap component loader, copy the _bootstrap.scss file into your src/assets/sass folder (or wherever your project SASS is) and rename it to _bootstrap_custom.scss. You can remove components as you please, depending on what your needs are.

As a last touch, you need a main.scss file which will load your custom SCSS, as well as Bootstrap. Create it in the same location. It could look a bit like that (this is a preference/organization thing)

Congratulations. You have a fully working, customizable, upgradable Bootstrap included in your project. Your usual workflow would be to have a copy of the Bootstrap _variables.scss file open and copy/modify variables to a local variables.scss file. I’ve seen a more handy method: Copy all the contents of the original _variables.scss file into yours and comment out all of them (using your editor's comment shortcut) then every time you need to modify one, uncomment it, bring it on top and slowly built from there. Comments will/could be cleared out during SASS compilation time/uglification (but that’s a different howto).

In the next post, I’ll show my implementation of commonly asked — but missing — extra Bootstrap functionality.

Written by

Frontend-Developer living in Berlin, interested in Technology, Politics, Getting things done, Philosophy and Science.

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