Jump to content

The ultimate community for Ruby on Rails developers.


Overriding bootstrap css


  • Please log in to reply
2 replies to this topic

#1 Vell



  • Members
  • 100 posts
  • LocationWashington, DC

Posted 26 August 2013 - 03:12 PM

I have been trying to figure out how to override the css that comes with twitter-bootstrap-rails. I know that bootstraps css is being loaded after mine somehow but I am not sure how to force it so that mine loads after bootstraps.


Does anyone have an ideas of how I can do this?

#2 Kelli Shaver

Kelli Shaver


  • Administrators
  • 76 posts
  • LocationKentucky

Posted 02 September 2013 - 04:58 PM

Personally, I don't like the way Sprockets includes work for CSS for a number of reasons (it's fine for JavaScript). I end up taking that out and then manually @importing CSS as-needed, so I can put it in whatever specific order I want, have access to defined SASS variables, etc.


So rename application.css to application.css.scss and then import Bootstrap at the top of the file. 

#3 Rowel



  • Members
  • 109 posts

Posted 03 September 2013 - 11:54 AM

Check your appplication.css and see if you have  

*= require_tree 

I'd remove that, so you have better control of the order loading. I find that require_tree problematic


So you'd have something like this 

 *= require bootstrap
 *= require bootstrap-responsive
 *= require custom
 *= require_self

bootstrap-responsive comes after bootstrap (otherwise responsive doesn't work), and your custom.scss comes after bootstrap and put your bootstrap overrides in custom.scss  (or create another file called my-bootstrap-overrides.scss) 

Also tagged with one or more of these keywords: twitter-bootstrap-rails

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users