How to include twitter bootstrap in my Rails project manually (without using any gems)? - ruby-on-rails

Question

I'm learning Rails and want to play with Rails and Twitter Bootstrap. My Rails project layout is:
├─assets
│ ├─images
│ ├─javascripts
│ └─stylesheets
├─controllers
├─helpers
├─mailers
├─models
└─views
├─course
└─layouts
The Twitter Bootstrap layout is:
├─css
├─img
└─js
I know Bootstrap css file references its image file, such as:
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
margin-top: 1px;
}
So they must retain there relative position, or I have to change the CSS file. I want to know, if I don't want to use any Bootstrap related gems, what's the best way to place these Bootstrap files into my Rails project? Thanks.

Answer 1

First, you should probably move the Bootstrap source files to their appropriate locations in the assets folder in your Rails app - that is, CSS files in the stylesheets folder, JS in javascripts, and images in images.
As mentioned already, you'll need to change paths to images in Bootstrap's CSS. However, you'll need to make use of Rails' asset path helpers if you plan on using your app in production.
For example, background-image: url('../images/glyphicons-halflings.png'); is absolutely incorrect when using the asset pipeline. This will work fine in development, but as soon as you pre-compile assets for a production environment things won't work - Rails appends fingerprints to asset file names for caching purposes, which makes the URL above incorrect.
The correct way to code paths in your assets is outlined in the Rails Guide for the Asset Pipeline. If you're using CSS only, you should add the .erb extension to your filename (to get bootstrap.css.erb) and do something like this:
background-image: url(<%= asset_path 'glyphicons-halflings.png' %>);
If you are using SASS/SCSS, you can also use the built-in asset-path or image-path helpers. Again, this is mentioned in the guide I linked to above.
In the end, you probably should be using a gem, as this work will already be done for you. But, if you must, this should work well enough. Of course, if you ever want to update Bootstrap, you'll have to do this again.

Answer 2

I ran into the same trouble, and didn't want to have to install gems, etc.
There's a much easier solution.
Just override the icon selectors for background image in your custom CSS.
[class^="icon-"], [class*=" icon-"] {
background-image: url("/assets/img/glyphicons-halflings.png");
}
[class^="icon-white"], [class*=" icon-white"] {
background-image: url("/assets/img/glyphicons-halflings-white.png");
}
Put the glyphicons PNGs in app/assets/images/img/ (or wherever you want) and you're done.

Answer 3

You have to change every Glyphicons icon to the assets path. That's a lot of work. Also you have to use LESS, so the easiest way to use bootstrap with rails is using a gem. This is the gem that I use gem 'twitter-bootstrap-rails' this gem also includes font awesome so check this too

Answer 4

Redirect calls in routes.rb
get '/img/:name', to: redirect {|params, req| "/assets/#{params[:name]}.#{params[:format]}" }
This will redirect calls for /img to /assets

Answer 5

You can put the css and js files anywhere in your project as they don't reference each other, however, you will have to update the glypicon references in the css file.
In your case:
background-image: url("../images/glyphicons-halflings.png");
EDIT: I updated the path. I originally included "assets" which is incorrect with your given directory structure.