Integrating Rails (4.2) with Twitter Bootstrap (3.3) Tutorial

Looking for a quick lesson or tutorial on integrating Rails with Twitter Bootstrap? Ruby Plus has just the tutorial you’re looking for, and it seems fairly straightforward.

Included in this tutorial on integrating Rails (v4.2) with Bootstrap (v3.3) are the following steps/modules:

  • Adding gem ‘bootstrap-sass’, ‘~> 3.3.1’
  • Adding gem ‘sass-rails’, github: ‘rails/sass-rails’
  • Adding bootstrap-sprocket
  • Ensure the file has .css.scss extension for Sass syntax
  • Require Bootstrap Javascripts in app/assets/javascripts/application.js
  • Update the application.html.erb with the minimal Bootstrap document
  • Create app/views/shared/navigationbar.html.erb
  • Add <%= render ‘shared/navigation_bar’ %> to the app/views/application.html.erb
  • Adding the Login and Logout links to the navigation
  • Editing the application.html.erb file to wrap the `yield’ with div tag with class container
  • Adding the Register and Edit Registration link to the navigation bar. Change the application.html.erb
  • Changing the button to use Twitter Bootstrap button for login page. Edit the app/views/devise/sessions/new.html.erb
  • Changing the navigation bar in app/views/shared/navigationbar.html.erb

To learn more about this tutorial on integrating Rails with Twitter Bootstrap simply click on the button go to the Ruby Plus site.