28

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.

amphetamachine
  • 23,162
  • 10
  • 51
  • 68
maximos
  • 283
  • 1
  • 3
  • 4

3 Answers3

41

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.

Chris
  • 2,297
  • 1
  • 22
  • 22
David Jacquel
  • 46,880
  • 4
  • 106
  • 132
  • 4
    In case you want to leave your `sass_dir` alone (and let it default to `_sass`), you could instead make your import statement: `@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";` – doingweb Feb 28 '15 at 03:31
  • 1
    From [jekyll issue](https://github.com/jekyll/jekyll/issues/3366): in your _config.yml instead of using `sass_dir`define multiple `load_paths` e.g. `- bower_components/bootstrap-sass/assets/stylesheets` and `- _sass`. That way you are more flexible. – Skadi2k3 Mar 02 '16 at 11:04
  • 2
    Works only when not in safe mode, so not on gh-pages. https://github.com/jekyll/jekyll-sass-converter/blob/master/lib/jekyll/converters/scss.rb#L77 – David Jacquel Mar 29 '16 at 15:10
5

Update for Bootstrap 4.3.1 & Jekyll 4.0

you can use bunder to install BS into your site 

bundle install bootstrap

add it to gem file:

gem 'bootstrap', '~> 4.3.1'

get the path of BS

bundle info bootstrap

Add that path to _config.yml

sass:
    load_paths:
        - _sass
        -  C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/bootstrap-4.3.1/assets/stylesheets

relative path can also be added instead.

Finally, add bootstrap to style.scss

 @import "bootstrap";

https://getbootstrap.com/docs/4.3/getting-started/download/

GorvGoyl
  • 27,835
  • 20
  • 141
  • 143
3

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>
Jonas Vogel
  • 188
  • 5