CODEWITHSUNDEEP
csstwitter-bootstrap
Papa Charlie
Papa Charlie

Reputation: 635

bootstrap css how to resolve conflict

I saved and am using the bootstrap css but it conflicts with my main css.

it has tags body, html, a, img, p... and my css loses configuration

how can I use the bootstrap css without colliding? thank you

Upvotes: 1

Views: 8906

Answers (3)

Miomir Dancevic
Miomir Dancevic

Reputation: 6852

Try importing your custom CSS after Bootstrap CSS.

In CSS, the “!important” suffix was originally intended to provide a method of overriding author stylesheets. Users could define their own “user stylesheets” and could use this suffix to give their rules precedence over the author’s (website creator’s) styles. Unfortunately, and quite predictably, its usage has spread massively, but not in the right direction. Nowadays, it’s used to counteract the pain of having to deal with CSS specificity, otherwise known as the set of rules which dictate that “div h1 a” is more specific selector than “div a”. Most people that use CSS on a daily basis don’t know enough about CSS specificity to solve their problems without using the “!important” suffix.

Upvotes: 2

chandu
chandu

Reputation: 2276

1.over ride those styles in your css file by using !important property. bootsrtap css either override or extend your css with bootstrap css so if you want to override entire css of some class best to use !important property.

2.if your are using script in your code so its very easy to differentiate the css styles.

Upvotes: 0

crafter
crafter

Reputation: 329

  1. Try combining into one CSS, multiple CSS slows down the sites.
  2. Even, Bootstrap has its own body,html, etc tags. You have to edit them or delete/comment them. So it avoids conflicts.
  3. Generally, the last CSS property will be applied, so if you put your body, html etc at the end of Bootstrap.css, that might work, but not recommended.

Upvotes: 0

Related Questions