Categories
Ruby on Rails

How to add Bootstrap 4 to your Ruby on Rails Application

Luckily adding Twitter Bootstrap 4 to your ruby on rails application is not too complex.

Here’s the quick and dirty steps to adding bootstrap to your rails application.

Launch your app

Move into your existing application directory or run rails new myapp to create a new application.

Add the bootstrap and jquery gems to your Gemfile.

gem 'bootstrap', '~> 4.4.1'
gem 'jquery-rails'

Run bundle install --verbose (it may take a while).

Restart your server if you have it running. This is an important step for ensuring bootstrap is available in the applications pipeline.

Import styles in application.scss

Rename the default app/assets/stylesheets/application.css to a .scss file.

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

Remove all the *= and *= require_tree statements to have access to Bootstrap mixins and variables.

Importing bootstrap at app/assests/stylesheets/application.scss

Add jQuery

Bootstrap 4 relies on jQuery for all the JavaScript heavy lifting.

Earlier we added the ‘jquery-rails gem’ and ran bundle install.

Now all we have to do is add bootstrap dependencies to our app/assests/javascripts/application.js

//= require jquery3
//= require popper
//= require bootstrap
Add bootstrap dependencies to your application.js file.

Check the source code

To test that bootstrap was added to our applications assets pipeline, launch the server and check the source code.

Checking the applications source code for links to bootstrap.

You did it!

What did we do?

  • Added the Bootstrap and Jquery gems to our Gemfile and ran bundle install --verbose.
  • Renamed our application.css to a .scss file and added @import "bootstrap";
  • Added jQuery dependancies to application.js
  • Confirmed what we did by launching the app and checking the source code.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.