Over a million developers have joined DZone.

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

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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!

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


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

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}