Bootstrap is overriding custom CSS in Ruby on Rails 4 website?

Question

I used http://www.gotealeaf.com/blog/integrating-rails-and-bootstrap-part-1 to install Bootstrap on my Rails 4 website. Basically, I installed the gems:

gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'

And then in my application.css.scss I have:

 ...* defined in the other CSS/SCSS files in this directory. It is 
 generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

@import "bootstrap-sprockets";
@import "bootstrap";

/*some css code that does work.*/

It's working perfectly, aside from one snag. In my css file for my

/* 
Filters
*/
#filters{
    position: relative;
}

.searchbox{
    width:100px;
}

.filter{
    display: inline-block;
}

and then in my view, I have

<div id="filters">
    <input type="text" class="form-control filter"/>
    <input type="text" class="form-control filter"/>
</div>

However, the inputs are not displayed side by side. If I remove form-control in the inputs class, it does work. I checked in chrome, and basically the filter class's display:inline-block was being crossed out by the bootstrap form-control.

I'm not very good at css, but as far as I can tell, rails is putting bootstrap's css file after mine, which is causing bootstrap to be more "important".

I looked and looked, but I couldn't find a way to have my css loaded AFTER the bootstrap css (if I'm even right over the source of this confusion)

Hope you can help. Thanks in advance!

surreymagpie · Accepted Answer · 2015-04-06 07:56:44Z

In css, rules that appear later in the same stylesheet or in a different stylesheet which loads later in the html will override similar ones already defined. For example

p { color: blue; }

p { color: red; }

will produce red text.

Your @import statements for bootstrap are referenced by the require_self line which appears after the require_tree . line. As a result, the bootstrap css will appear at the end of your compiled stylesheet and override any rules with the same selectors.

With sass, you are recommended not to use sprockets as you can't really control the source order but rather use @import for each of your sass partial files.

Reversing the two require lines might work well enough for you. Otherwise I would suggest you remove all the sprockets directives and comments above your @imports, move any code below into its own partial and explicitly @import each partial in the exact order you want.

user3316920 · Accepted Answer · 2015-04-05 21:20:49Z

0

Make sure your custom CSS in linked to from your HTML after the bootstrap links.

HTML head
link bootstrap
link custom CSS

answered Apr 5, 2015 at 21:20

user3316920

5 Comments

maor10 Over a year ago

Ya, as I said, it's showing as crossed out by chrome, it's loading it before bootstrap (which is the problem).

maor10 Over a year ago

user3316920 Over a year ago

Can you link your header file with the links to your CSS in it. Just update post. I am much better at giving help when I can visualize it :)

maor10 Over a year ago

Header file? What do you mean?

user3316920 Over a year ago

I'm thinking of the <head> in your html. But you said that it already listed bootstrap first and custom css after so nvm.

Community · Accepted Answer · 2017-05-23 12:09:14Z

0

First:
Follow Bootstrap application.css.scss order.

Second:
Run these command in console in order:
rake assets:clobber (Remove all compiled assets)
RAILS_ENV=production bin/rake assets:precompile

Third:
Restart server with production mode.

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Apr 6, 2015 at 9:03

Ivan Chau

1,4451 gold badge18 silver badges28 bronze badges

Collectives™ on Stack Overflow

Bootstrap is overriding custom CSS in Ruby on Rails 4 website?

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related