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 Jekyll-Bootstrap, but there is no longer support for it. I have built my Jekyll site and am hoping there's a way to pull in Bootstrap.

Answer 1

As Jekyll natively supports sass, you can use bootstrap-sass.

I personally install it with the bower install bootstrap-sass command.

This installs Bootstrap and Jquery in the bower_components folder.

Configuration

In your _config.yml add :

sass:
  # loading path from site root
  # default to _sass
  sass_dir: bower_components/bootstrap-sass/assets/stylesheets

  # style : nested (default), compact, compressed, expanded
  #         :nested, :compact, :compressed, :expanded also works
  # see http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
  # on a typical twitter bootstrap stats are :
  # nested 138,7kB, compact 129,1kB, expanded 135,9 kB, compressed 122,4 kB
  style: compressed

Javascript

If you want to use javascript, in your _includes/footer.html add :

<script src="{{ site.baseurl }}/bower_components/jquery/dist/jquery.min.js"></script>
<script src="{{ site.baseurl }}/bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js"></script>

Use

In css/main.scss delete previous content and add

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

/* path to glyphicons */
$icon-font-path: "/bower_components/bootstrap-sass/assets/fonts/bootstrap/";

/* custom variable */
$body-bg: red;

/* any style customization must be before the bootstrap import */
@import "bootstrap";

You can see all variables available in bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss

You can remove you old _sass folder.

Now your css file is generated at each build.

Answer 2

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:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>