Skip to content

Installing Bootstrap

Paul Milla edited this page Jul 23, 2015 · 2 revisions

Installing/Updating Bootstrap

My potentially dumb way without additional dependencies

Download the newest bootstrap-sass from the official link here and save it somewhere, say ~/Downloads/bootstrap-sass-3.3.5

Step 2: Check out the folder!

The rest of the guide essentially follows the README.md file inside. Since Jekyll on GitHub is built on Ruby on Rails we'll follow that.

Step 3: Install gem files

Assuming / is the project root folder, open /Gemfile and add or make sure to have the following lines:

gem 'bootstrap-sass'
gem 'sass-rails'

Then just install the new dependancies through bundle install

Step 4: Import bootstrap-scss files

Copy over stylesheet files from the bootstrap's directory (~/Downloads/boostrap-sass-3.3.5/assets/stylesheets) into our _sass directory (/_sass). Note boostrap-sass-3.3.5/assets/stylesheets/_bootstrap-compass.scss and boostrap-sass-3.3.5/assets/stylesheets/_bootstrap-mincer.scss might not be needed/used for us.

Edit /style.scss and include the following imports near the top of the file

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables" for icon fonts to work
@import "bootstrap-sprockets";
@import "bootstrap";

Step 5: Import javascript files

Import bootstrap js files into the base/default html file at bottom like so.

//= require jquery
//= require bootstrap-sprockets

bootstrap-sprockets and bootstrap should not both be included in application.js.

bootstrap-sprockets provides individual Bootstrap Javascript files (alert.js or dropdown.js, for example), while bootstrap provides a concatenated file containing all Bootstrap Javascripts.