Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Limit the scope of bootstrap styles

How do I limit Bootstrap to just the scope of a div? I need to nest the Bootstrap stylesheet inside an ExtJS app for especific divs and both are clashing since they need their own body, ul, li, a, etc.

I'm trying to avoid editing bootstrap.css manually (or keeping it to a minimum) so that it can be easily updated.

like image 950
ojosilva Avatar asked May 12 '12 23:05

ojosilva


People also ask

How do I get bootstrap to only one div?

use custom class name for div in which u dont want to use bootstrap.... As bootstrap apply js and css to only standard pre-defined names....and most important dont forget to use external . css and . js file to override styles and scripts for global tags which are defined in bootstrap plugin such as h,a etc....


Video Answer


1 Answers

You can fork the bootstrap repo and change bootstrap.less to wrap the bootstrap styles:

.bootstrap-scope {     //put bootstrap @includes in here } 

Then, in the root of the bootstrap project, run make to generate the bootstrap.css file.

You'll lose the global styles bootstrap assigns to the body and html tags, but you might not want them anyway.

And then, in your app, give the container you want the .bootstrap-scope class.

like image 88
Andrew Homeyer Avatar answered Sep 24 '22 10:09

Andrew Homeyer