Adding Bootstrap to Jekyll

Question

I\'m new to Jekyll and would like to pull in some of the Twitter Bootstrap functionality. Has anyone done this and, if so, do you have any advice? I would have gone with Jek

Answer 1

Update for Bootstrap 4 Beta

As Bootstrap 4 Beta now runs on Sass, you could use the "official" bower package.

Here's what I did:

1. Install Bootstrap using Bower

bower install bootstrap#v4.0.0-beta --save to install Bootstrap and its dependencies to the bower_components folder.

2. Configuration

In _config.yml, I changed the Sass folder and excluded bower_components from processing:

sass:
   sass_dir: assets/css

# Exclude from processing.
exclude:
  - bower_components

3. Sass

I changed assets/css/main.scss as following:

---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";


@import "variables";  // (2)
@import "../../bower_components/bootstrap/scss/bootstrap"; // (1)

// Import other styling below
// ...

(1) Note that the second import statement has to be relative to the Sass directory specified in _config.yml. Since I choose it to be the folder that also contains the main.scss, the asset linking in your favourite IDE (e.g. WebStorm) won't break.

(2) To overwrite Bootstrap Sass variables, I created assets/css/_variables.scss which has to be imported before the Bootstrap library.

4. Javascript

Since I did not find a way to use the JS shipped into bower_components, I choosed to include the CDN versions as proposed by Bootstrap: