Rails - How do I ensure my styles take precedence over Bootstrap?

Question

I'm sure this is a dead simple question, but I can't find a straight forward answer so thought I'd ask here.

I'm building a site using Bootstrap, though want my custom styles to take precedence over Bootstrap's.

I'd imagine it's probably as simple as adjusting the order in my application.css.scss file, but my tinkering hasn't found a solution yet.

Currently this file is as follows:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * 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";

I've just started building this site, and have a couple of Bootstrap grid columns, one of which I'd like to remove the padding from. The other, I've added a background image and height to, no problem. The following code is from home.css.scss:

.col-md-4 {
  background: url('http://i.imgur.com/xxxxxxxxxxxx.jpg');
  height: 1000px;
} //both of which work

.col-md-8 {
  padding: 0px 0px 0px 0px;
} //which is overridden by Bootstrap's default styling

As I've said, hopefully this is a real simple solution that won't take too much effort to answer. Appreciate any help! Steve.

Good reading on a subject: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ — BroiSatse, Mar 12 '15 at 12:03
Great read, and I've worked out the answer to my question using it. As the classes matched, Bootstrap was taking precedence due to its position in the cascade. By moving `@import "bootstrap-sprockets"; @import "bootstrap";` to the top of `home.css.scss` my styles then take precedence. Thanks a bunch @BroiSatse. — SRack, Mar 12 '15 at 12:16

score 0 · Accepted Answer · answered Mar 12 '15 at 12:19

Worked out the answer using @BroiSatse's great link: http://vanseodesign.com/css/css-specificity-inheritance-cascaade

As both Bootstrap and my code were referencing the class .col-md-8, Bootstrap's styling was taking precedence due to its positioning in the cascade.

By moving @import "bootstrap-sprockets"; @import "bootstrap"; from application.css.scss to the top of home.css.scss, my styles then take precedence. And everything is working as it should be! Thanks all for the help.

score -3 · Answer 2 · edited May 23 '17 at 12:01

-3

You can make use of !important . What it says; that 'this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!'

p {
    color: red !important;
}
#thing {
    color: green;
}

<p id="thing">Will be RED.</p>

For Example: Demo

Reference: Here

edited May 23 '17 at 12:01

Community

1
1

answered Mar 12 '15 at 12:00

Ganesh Salunkhe

596
1
4
18

4

Using `!important` is risky, and it should only be used when no other ways are available. – Sharvy Ahmed Mar 12 '15 at 12:02
3

@GaneshSalunkhe - using `goto` is also a workaround in C++. It is a bad practice to place `!important` - it means that a developer doesn't understand CSS specificity and is trying to get rid of C from CSS. Cascading is beautiful, don't kill it. – BroiSatse Mar 12 '15 at 12:09

Rails - How do I ensure my styles take precedence over Bootstrap?

2 Answers2