0

I"m trying to use bootstrap UI, but their css is pushing into global css stuff like label and so on. so can't use it as is as my entire application css is getting overwritten. is there any solution to that?

j08691
  • 204,283
  • 31
  • 260
  • 272
lolypop
  • 38
  • 3
  • Override it with more specific styles. (Make sure bootstrap's CSS loads before yours does.) – Blazemonger Nov 20 '14 at 16:34
  • thats really hard. they got so many definitions. i tried it and got lost. – lolypop Nov 20 '14 at 16:36
  • [A good intro to CSS specificity](http://css-tricks.com/specifics-on-css-specificity/) – Blazemonger Nov 20 '14 at 16:37
  • thanks. ya i know of priority. its just very problematic to override so many definitions. they should have used some prefix like in jquery ui to make it more bootstrap specific – lolypop Nov 20 '14 at 16:44

1 Answers1

0

yes there is. if you are using less for example, bootstrap provieds less files and not just css files. so you can scope the entire bootstrap css with some prefix class of yours. for example:

.bootstrap-ui {
@import "../bower_components/bootstrap/less/bootstrap";
}

this means you can now do

put bootstrap component here.....

and only this div will be impacted by the bootstrap css.

sagie
  • 1,744
  • 14
  • 15