Getting Application.CSS to Override Bootstrap

getting application.css to override bootstrap

Try to let your application.css just for 'require' purposes, it will pave your way to track errors as well as take advantage of Rails3 assets pipeline stack.

In your app/assets/stylesheets/application.css:

/*
 * 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 top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require bootstrap
 *= require bootstrap_responsive
 *= require my_styles
 */

In your app/assets/stylesheets/my_styles.css put the custom css that you have now in application.css.

That way your custom styles will be loaded after all the bootstrap stuff, overriding it.

To be honest I think that this is what is happening to you right now: it is not bootstrap.css what is overriding your styles, it is bootstrap_responsive as it is loaded after your styles.

I can't override bootstrap css in rails with my custom css

I quote https://github.com/rails/sprockets#the-require_self-directive

The require_self Directive

require_self tells Sprockets to insert the body of the current source file before any subsequent require directives.

This means that if your require_self and then import bootstrap, as CSS stands for cascade style sheets, the last style will always be applied plus rules of css specificity.
Read about css specificity at the following link
http://cssspecificity.com/

You can try setting !important to test if the problem is solved. An alternative would be including as suggested your css or scss code in a separate file:

*= require_tree .
 *= require_self
 *= require custom
 */
@import "bootstrap-sprockets"
@import "bootstrap"
@import "my-css-style"

If you still have doubts, check how the application.css.scss is loaded at localhost:3000/assets/application.css.scss to see how the different stylesheets are loaded in one file, then also work with debug on chrome/firefox, disable all the styles until you figure out which one is overriding.

How to override bootstrap?

It appears the key for changing the background in the navbar is associated with background-imagea gradient on the .navbar-default. If you apply none to that property you should get the desired effect.

.navbar-default{
  background-color: red;
  background-image: none;
}

The other overrides should work normally as you saw with the text color change.

DEMO

custom css cannot override bootstrap css

I think the problem is that your css file is properly linked or not linked at all to your HTML page. You should check that first

How to Override Node Bootstrap styles in Rails 5.1?

Ok, I have this working, here's what I did:

1. Added my sass files (variables, the bootswatch file, and some globals) to the /app/javascripts root folder
2. Created an packs/app pack folder as my projects base pack

in that pack folder:

3. Created index.js where my import statements are
4. Created styles.scss where sass import statements are

My styles.scss starts with:

@import "../../variables.scss";

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";

@import "../../bootswatch.scss";
@import "../../utils.scss";

which is working great, loads base bootstrap, followed by the bootswatch, and variables stick.

As the project progresses i'll make new pack folders if necessary for specific functionality, though this is a pretty pure "rails" app, so we'll see as it grows.

---

Related Topics