Take the 2-minute tour ×

I've gone through my app and am having trouble finding where exactly the Twitter Bootstrap source goes when I include it through a gem. If I wanted to view the Bootstrap .css for example, how do I find it?

The alternative, as I understand, to including it as a gem would be do download and include the source directly, correct? Is one approach better than the other.

Finally, if I wanted to modify the Bootstrap css what is the best way to do it? If I had the source in my app I imagine I could just go in there and modify things. How about if I'm including it as a gem?

Some clarification on how this works would be greatly appreciated. Having the source sitting in my app's directory somewhere makes sense, and I could point to it relative to the .html files...but with the Gemfile I feel like things are in a little black box...

share|improve this question
I recommend you watch this: railscasts.com/episodes/328-twitter-bootstrap-basics and read this: github.com/seyhunak/twitter-bootstrap-rails –  fmendez Apr 7 '13 at 21:49
As I've included bootstrap now I've used "gem bootstrap-sass" and I've done that outside of any specific environment. The video mentions including it in the assets group. Do I need to adjust that? Also, I've not actually run any specific bootstrap installer except bundle install. Possibly due to this I have no actual Twitter folder or other assets installed...(I got this far with the Rails Tutorial and nothing else is mentioned except including the gem and the @import tags in a .css file) –  MCP Apr 7 '13 at 22:23
add comment

2 Answers

up vote 11 down vote accepted

I absolutely agree it's underwhelming to have the Bootstrap files sit outside your application.

I recommend the following workflow in this case:

  1. Clone the repo bootstrap-sass from Github or download the zipball. It's the official port of Bootstrap into Sass and it's kept updated by the same team.

  2. Copy only the Sass partials (the ones whose filename begins with an underscore) to app/vendor/assets/stylesheets. Javascript and images go into their respective directories under app/vendor/assets. That will remind you to stay away from editing those files while at the same time keeping your app's asset directories clean. And whenever you feel like taking a closer look at them, they will be right at hand.

  3. Copy bootstrap.scss to app/assets/stylesheets and tinker with those as much as you want. Be sure to turn off all the features you're not using, because carrying that stuff around will mean having a larger CSS file than you need.

  4. Customize your Boostrap variables and classes and load them after the Bootstrap files in your manifest, just like you would with a gem. For instance, let's say you put your own variables into _overrides.scss. Your application.css.scss would look like this:

    @import "bootstrap";
    @import "overrides";

That's it. That's what app/vendor/assets was made for!

share|improve this answer
That's really helpful. Thank you for showing the alternative way to work with these files. This brings up another question. When you say, "live outside of your app", can you tell me exactly where they live when included with just the gem? This might be my lack of understanding of how the gems work. Are they stored somewhere with my ruby/rails gems and then called in by the application at run time? –  MCP Apr 7 '13 at 22:32
Gems are installed in different places depending on whether you use RVM or straight up Ruby binaries. But it's easy to find that out. Just type gem which followed by the gem's name and you'll see where it resides. Go ahead and try it out with gem which rails –  depa Apr 7 '13 at 22:46
add comment

i am relatively new to RoR and found there are several different ways to implement bootstrap. i tried the gem thomas-mcdonald / bootstrap-sass and got that to work great. but i wanted to get more in depth knowledge of what exactly the bootstrap files were doing and what the code looked like. the above answer was very helpful. i just wanted to add that this bootstrap 3 video proved to be very useful and worked for me.

share|improve this answer
add comment

Your Answer


