Practical Rails: Adding a Bootstrap Theme

DZone 's Guide to

Practical Rails: Adding a Bootstrap Theme

Read Mahboob Hussain's quick tutorial and learn how to add Twitter Bootstrap CSS/JS themes to Rails applications.

· Web Dev Zone ·
Free Resource

Practical Rails: Adding a Bootstrap Theme

When you are trying to get your web app prototype or MVP up and running, you wouldn't wait for your UI group to deliver their entire UI assets. {wrap}bootstrap is a good place to get bootstrap themes for less than $20. And who knows, the theme you select may be good enough to go to production.

In this post, I present the steps to plug a bootstrap theme into your Rails app.

Let's say your theme is my_theme. In vendor/assets, create a sub-directory 'my_theme' under each of fonts, images, JavaScripts, stylesheets, directories.

Copy the respective asset files to each of these sub-directories. So:

all [*.eot, *.svg, *.ttf, *.woff, *.woff2] files go under fonts/my_theme
all [*.png *.jpg *.gif] files go under images/my_theme
all [*.js] files go under javascripts/my_theme
all [*.css] files go under stylesheets/my_theme

You can do the above with the find command in your theme directory.

  • find . -name "*.js" -exec cp {} path_to_my_project/vendor/assets/javascripts/my_theme \;

Please note the called CSS and JS files in your index.html. Copy them in the same order to application.css and application.js.


*= require my_theme/bootstrap
*= require my_theme/font-awesome
*= require my_theme/fontello
*= require my_theme/magnific-popup
*= require my_theme/settings


//= require my_theme/jquery.min
//= require my_theme/bootstrap.min
//= require my_theme/modernizr
//= require my_theme/jquery.themepunch.tools.min
//= require my_theme/jquery.themepunch.revolution.min
//= require my_theme/isotope.pkgd.min

Put all assets in the assets pipeline.


Rails.application.config.assets.precompile += %w( *.png *.gif *.jpg *.ico *.svg *.eot *.ttf *.woff *.woff2)

Change URLs in CSS files (bootstrap, fontello, font-awesome, settings, style, etc.)



to this:


You are now all set!

bootstrap, rails, ruby

Published at DZone with permission of Mahboob Hussain , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}