Bootstrap is at version 4 alpha 6 as we speak, so we'll add that to our Ruby on Rails application. It will provide us with the common style and JavaScript functionality, we have come to expect nowadays from the web applications. We have used it at our podcast player website, Lugano.io
Gemfile
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:
bundle install
Stylesheet
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 import directive.
Variables
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:
JavaScript
JavaScript components, such as tooltips, popovers, modals, etc.. can be included in the JavaScript manifesto application.js:
// app/assets/javascripts/application.js
//= require tether
//= require bootstrap-sprockets
One thing I've noticed here, is that the Affix plugin is not included.
Conclusion
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.