The bootstrap gem does a great work keeping up to date with the latest version of Bootstrap, so let's add that to our Gemfile.
# /Gemfile gem 'bootstrap', '~> 4.0.0.alpha6' gem 'rails-assets-tether', '>= 1.3.3', source: 'https://rails-assets.org'
Please note that the tooltips and popovers depend on tether for positioning, so we need to add that gem too. Then let's bundle:
Bootstrap is built on SASS, so we need to include the stylesheets via a SASS manifest file. For that let's change our manifest:
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
And add bootstrap to it:
Any custom stylesheets can be added underneath using the
Any SASS variables should be added before importing
bootstrap. The current variables used by Bootstrap set colours, grid widths, paginations, but also component specific styles, like tooltips, popovers, etc. I have bookmarked this link as I do reference to it quite often.
For example, to change the primary colour, we add this to our manifest file:
One thing I've noticed here, is that the Affix plugin is not included.
And talking about not included elements, the web fonts, glyphicons, are also excluded. We need to import them manually. To generate the web icons we need, we can use services such as Iconly, Lugo Labs latest project. It allows creation of five free projects.
And now a joke:
Q: Why was six scared of seven?
A: Because seven "ate" nine.