CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3twitter-bootstrap
slindsey3000
slindsey3000

Reputation: 4271

Where in my Rails app is the Bootstrap CSS?

Learning rails... so I use the bootstrap-sass gem... Where are the actual bootstrap CSS files? Seems like there is some sort of magic going on to include them. What if I want to tweak a property of the CSS....

Upvotes: 6

Views: 3109

Answers (3)

Daniel Kehoe
Daniel Kehoe

Reputation: 10952

You're using the bootstrap-sass gem which is preferred by many Rails developers. So the Twitter Bootstrap CSS files are in the gem (in vendor/assets/stylesheets/).

Developers use a gem to include Bootstrap files because it makes things easier to update when new Bootstrap versions are released by simply updating the gem (plus gems are the Rails way, eh?). The bootstrap-sass gem is popular because Sass is the default format for stylesheets in Rails. An alternative is the twitter-bootstrap-rails gem which uses the native Bootstrap LESS format for stylesheets.

Using the gem, you need to modify the file app/assets/javascripts/application.js:

#app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

Best practice is to add a file named app/assets/stylesheets/bootstrap_and_overrides.css.scss:

# app/assets/stylesheets/bootstrap_and_overrides.css.scss
@import "bootstrap";
body { padding-top: 60px; }
@import "bootstrap-responsive";

This shows an example of overriding the Bootstrap body style to add padding to accommodate the Bootstrap navigation bar. Then just add application-specific CSS (or Sass) in additional files in app/assets/stylesheets/.

I've written an in-depth article:

Twitter Bootstrap and Rails

that goes into greater details and shows how to set up the application layout, navigation links, Rails flash messages, and form builders for Twitter Bootstrap. The article could be helpful if you want to know more.

Upvotes: 4

ddavison
ddavison

Reputation: 29032

The CSS files are inside the gem. To include them in your application,

in app/assets/stylesheets/ you can create a file of your choice. (i'll call it bootstrap_overrides.css.scss)

and include the bootstrap source, and override.

@include "bootstrap"; 

/* here are the overrides if you want to override the styles */

@include "bootstrap-responsive";

and make sure that bootstrap_overrides.css.scss is included in your global application.css file.

Upvotes: 1

varatis
varatis

Reputation: 14740

Unfortunately, if you use the gem, the css files are hidden from you. If you do a bundle show bootstrap-sass you'll see where the files for the gem are, and you can see the stylesheets being used in there.

If you view the gem's files, you'll see the stylesheets being used in vendor/assets/stylesheets/.

I'd recommend just not using the gem, and getting your own Bootstrap stylesheets and putting them in your application's vendor/assets/stylesheets/.

Upvotes: 3

Related Questions