Adding Bootstrap to Jekyll

Solution 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.

Solution 2:

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/