Overriding Bootstrap and Bootstrap Sass in Rails

So many of you who use rails know that bootstrap is an extremely popular CSS and Javascript add-on used by many rails developers.  I use the Bootstrap-Sass gem by Thomas McDonald.

Today I wanted to override the bootstrap css in my app to make the ‘container’ class 100% width with no margin.  I want to save you some time that I spent searching around.

I found these two posts on the ever useful Stack Overflow, but since I used a gem instead of the ‘require’ to add bootstrap to my app, this didn’t work for me.  So here is what worked.  

Basically you just need to make sure that whatever custom css or overriding css you are using is loaded after bootstrap.  So I simply moved my custom “.container” class after the “@import bootstrap” lines in my styles.css.scss file:

Screen Shot 2013-12-14 at 7.00.16 PM

I guess it might not be the most efficient way to load one css file then load a second to override it, but I don’t know how to do it any other way…..yet 🙂

Let me know if this helped you!

Advertisements

One Response to Overriding Bootstrap and Bootstrap Sass in Rails

  1. Pingback: What I learned today | Customize Twitter Bootstrap CSS in Ruby on Rails

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: