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

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.

Just change the glyphicon path. background-image: url("../assets/images/glyphicons-halflings.png"); That's all I've done when faced with similar situations. — Dmase05, Dec 12 '12 at 19:20

score 3 · Accepted Answer · answered Dec 12 '12 at 19:44

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.

score 3 · Answer 2 · answered Apr 05 '13 at 04:43

3

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.

answered Apr 05 '13 at 04:43

b.rad

116
1
4

using a Gem is probably the right answer, but +1 for the quick hack – MikeJ Apr 23 '13 at 01:26
Excellent for edge-cases. Thanks. – Maximilian Stroh May 06 '13 at 21:29

score 2 · Answer 3 · answered Dec 12 '12 at 21:12

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

score 1 · Answer 4 · answered Jul 21 '13 at 14:28

1

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

answered Jul 21 '13 at 14:28

Haris Krajina

14,824
12
64
81

Dmase05 · Answer 5 · 2012-12-12T19:35:04.307

0

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.

edited Dec 12 '12 at 19:35

answered Dec 12 '12 at 19:23

Dmase05

1,059
15
18

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

5 Answers5

Linked