Limit the scope of bootstrap styles

Question

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 the

Answer 1

If you have the following file structure:

• mystyles.less
• mystyles.css
• /bootstrap/
  • bootstrap.less
  • bootstrap.css
  • grid.less
  • ...
  • /mixins/

And you want to limit the scope of bootstrap, you have to put in your mystyles.less (right way):

.your-class-to-limit-bootstrap-scope{
    @import (less) "bootstrap/bootstrap.css";
}

We have to import the bootstrap.css file instead of bootstrap.less, but using the (less) @import option in order to treat the file as a Less file, no matter what the file extension. So, you will get the correct css, for example:

.your-class-to-limit-bootstrap-scope .col-xs-1,
.your-class-to-limit-bootstrap-scope  .col-sm-1,
.your-class-to-limit-bootstrap-scope ...
.your-class-to-limit-bootstrap-scope .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-left: 7px;
    padding-right: 7px;
 }

But if you import bootstrap less files you will get a incorrectly scoped css (wrong way):

.your-class-to-limit-bootstrap-scope{
    @import "bootstrap/bootstrap.less";
}

So, you will get the incorrect scoped css, for example:

.your-class-to-limit-bootstrap-scope .col-xs-1, 
.col-sm-1,
.col-md-1,
...
.col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}