Rails 4

Twitter Bootstrap 3 in a Rails 4 Application

Over the past few days while working through a proof of concept web application. I was searching for a way to incorporate Twitter Bootstrap 3 as it will decrease my interface development time. Twitter Bootstrap 3 was released within the past few weeks so support from a gem was out of the question. I did try a few of the gems that were out there but most don’t support Bootstrap 3. The end solution was to add Bootstrap 3 manually, which is quite easy.

I came accross a Stack Overflow suggestion of just uploading the folders of assets you need to the vendor folder in your Rails application structure. Which surprisingly was easy and worked; no need to manage what version of a gem I need, etc.

Simply, Download Twitter Bootstrap 3. In the downloaded archive you will see a ‘dist’ folder which will house the css, javascripts, and fonts folders we will want to copy to our Rails application vendor/assets/ directory.

After this we need to let our Rails application know to include these newly added javascript and css files. To do this we edit the app/assets/stylesheets/application.css:

*= require bootstrap
*/

And edit the app/assets/javascripts/application.js:

//= require bootstrap

Now if you run your application you can see the assets will load properly. One of the issues I ran into while adding glyphicons was that they wouldn’t load. Digging further I found the font files weren’t being requested by the application.

To get the glyphicons working I had to add a line to the config/application.rb file. Add the following within class Application < Rails::Application.

config.assets.paths << "#{Rails}/vendor/assets/fonts"

Then at the terminal run the command to get the assets to compile:

rake assets:precompile RAILS_ENV=development

Now we need to update the bootrap.css file (you’ll likely need to update the bootstrap.min.css file as a result, too), search for @font-face with your text editor and update the paths to the font urls to include /assets/glyphicons-halfings-regular.* (include the file extension).

This is what the url’s will be originally in the bootstrap.css file.

@font-face {
   font-family: 'Glyphicons Halflings';
   src: url('../fonts/glyphicons-halflings-regular.eot');
   src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),          url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

You want to change each of these resource locations to /assets/glyphicons-halfings-regular.* as shown below.

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('/assets/glyphicons-halflings-regular.eot');
  src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),      url('/assets/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Refresh or restart your Rails server and you should be up and running with glyphicons and Bootstrap 3 without the need of a gem.

Read next