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.
Advanced bootstrap tutorial - grid

Advanced Bootstrap Grid Tutorial

The folks over at HappyFunCorp have written an outstanding advanced Bootstrap grid tutorial for those looking to go beyond the Bootstrap basics and design a unique site, template or theme.

The tutorials first describes the three major complaints developers have when using the bootstrap framework:

  • Site created with bootstrap all look the same (cookie-cutter)
  • There are too many classes in the HTML
  • There are too many other things that you simply don’t need, and that seem to get in the way

However, you can easily overcome these issues by using LESS or SASS, which will allow you to customize things using variables, getting things to look and behave the way you want, all without struggle with the bootstrap framework.

This topics covered in this advanced bootstrap tutorial are:

  • SASS
  • The Twelve Column Grid and how it works
  • How col- classes are defined
  • Using semantic classes
  • Mixins
  • Redefining grid-columns
  • Ordering includes

Click on the link below to take the advanced bootstrap grid tutorial.

Go to the Advanced Bootstrap Grid Tutorial