If you are looking to use Bootstrap 3 with Rails, then this article is for you. It provides a guide to adding Bootstrap 3, aka Twitter Bootstrap 3, to a new Rails 4 project. I found from , however I’ve deviated slightly from his implementation and I decided to document it.
Let’s start by creating a new project:
rails new bootstrap
Next, we need and you can download the latest version . At the time this article was written, the latest Bootstrap release was v3.0.2.
I’m only interested in using the minimized Bootstrap files. We need to copy a number of files into our project from the Bootstrap download:
- Copy
bootstrap.min.css
to the/vendor/assets/stylesheets
directory - Copy
bootstrap.min.js
to the/vendor/assets/javascripts
directory - Copy the fonts directory and its contents to
/vendor/assets/
Now that the files have been added to your project. We need to tell the application to use them.
Edit app/assets/stylesheets/application.css
and add *= require bootstrap.min
along with some @font-face
overrides which change the path to the glyphicons. We’ll do that here to avoid changing the bootstrap files.
*= require bootstrap.min *= require_self *= require_tree . */@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');}
Next, we need to edit app/assets/javascripts/application.js
and add//= require bootstrap.min
. Here’s a look at mine:
//= require jquery//= require jquery_ujs//= require bootstrap.min//= require turbolinks//= require_tree .
That is all it takes to add to your rails application without a gem. There is also a sample application on Github, you can .
I also recently published a new article that builds on this project. In it, I show you how to build the in Rails. .
If you have any suggestions or feedback, please let me know in the comments, via or on.