CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Dan Cundy
Dan Cundy

Reputation: 2849

How to Stop Overriding of Bootstrap Css Styles

Problem

I have a stylesheet (bootstrap) that when applied in the header overwrites my personal styles.

I do need these bootstrap styles when the js is invoked otherwise the dialog that pops up is un-styled.

How can I stop my own styles from being overwritten?

Upvotes: 1

Views: 3312

Answers (2)

Leandragem
Leandragem

Reputation: 98

I didn't understand your question fully, but here's what I understood:

1- You are using Twitter Bootstrap in your project, and it is overwriting your stylesheets.
2- You need bootstrap for a popup dialog and nothing else.

Well, from the first question, you can:

-Call your hand-made stylesheet AFTER calling Bootstrap's css.
-Change your stylesheet CSS classes and ID's.
-Hierarchize your classes from the ID's, for example:

#foo{
    color: black;
}
#foo .bar{
    color: white;
}

#foo .bar>li{
    margin: 10px;
}

-Add a '!important' after the affected classes (Not recommended at all).

For the second matter, you could:

- Costumize your boostrap, you could pick certain plugins (such as popup), and exclude others that you don't use. (Costumize Bootstrap)

Upvotes: 1

problemPotato
problemPotato

Reputation: 609

Like Nick R mentioned in the comments - Order is important here. The browser will 'overwrite' styles as stylesheets are loaded. For example, if you have two sheets:

.darkdiv {
    color: #fff;
    background-color: #000;
}

and then a stylesheet with:

.darkdiv {
    color: #888;
}

Any element with class "darkdiv", will keep the original background-color but have the grey (#888) colored text as that style was 'overwritten' by the second stylesheet.

Upvotes: 0

Related Questions