Over a million developers have joined DZone.

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

Start coding something amazing with our library of open source Cloud code patterns. Content provided by IBM.

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!

Code something amazing with the IBM library of open source blockchain patterns. Content provided by IBM.

ruby ,rails ,bootstrap

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}