CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrap
RenegadeAndy
RenegadeAndy

Reputation: 5690

Rails overriding bootstrap's css in an organised way

I have a new rails project, and it is using the following gem:

gem 'bootstrap-sass'

I am using the horizontal-form CSS class - which has by default:

text-align:right; as part of .horizontal-form

I want to override this so that all labels have text-align:left;

In my rails project, under stylesheets I have the following:

1st_load_framework.scss

Which has :

// import the CSS framework

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

...bunch of css classes and @variables. 

//I have tried adding:

.horizontal-form{ text-align:left; } into this file however, it is overriding by the generated sass CSS.

application.scss

Which has :

    /*
 * 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 vendor/assets/stylesheets of plugins, if any, 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.
 *
@import "bootstrap-sprockets";
@import "bootstrap";
*= require_tree .
*= require_self
 */



.sign-up{
    background-color:#95ccfb;
}

.log-in{
    background-color:#75d86a;
}


.horizontal-form{ text-align:left !important; }

I have also tried adding :

 .horizontal-form{ text-align:left; }

to the bottom of application.scss to no avail.

How can I make an override like this? I don't believe this particular class has a sass variable, so I am looking for a normal CSS override here - something scalable for the rest of my project in rails would be great.

Using Rails 5.1.1, bootstrap 3

Please help!

Upvotes: 0

Views: 334

Answers (1)

Stephen W
Stephen W

Reputation: 244

Since you're overriding the bootstrap setting I'm guessing that the CSS is compiling your change above where it's declared by bootstrap CSS. And since it's lower in the cascade it's being given priority. I would try to make it read like this:

.horizontal-form{ text-align:left !important; }

That should override any prior definitions of the class. Use it sparingly though as !important can cause some issues if overused.

Edit

Rearrange your asset pipeline as such: 

*= require_self
*/
@import "bootstrap-sprockets";
@import "bootstrap";
@import "1st_load_framework";

The asset pipeline is loaded from top to bottom as well, so load your custom CSS after Bootstrap.

Upvotes: 1

Related Questions