Binding Bootstrap to a single div-container

Question

A tool written in php is included inside a shop system (oxid eShop as include). The tool is written with the help of bootstrap. I am including the bootstrap.css etc. after the oxid.css (main shop css). Now I have a problem with box-sizing etc.

If I can bind the whole bootstrap.css to a container-div, that bootstrap is just available for that container.. it would solve all my problems..

#myBootstrapContainer { bootstrap only available here }

Does anyone know how to do that?

Answer 1

You can't set different stylesheet for a part of a website. Check: Apply different css stylesheet for different parts of the same web page

You could modify bootstrap css and add before each selector id of you bootstrap container, for instance:

#myBootstrapContainer button {
  overflow: visible;
}

So boostrap's rules should work only your's container insides

Answer 2

oxid.css

    * {
-webkit-box-sizing: inherit;
     -moz-box-sizing: inherit;
          box-sizing: inherit;
}

custom.css (overwrites / extends oxid.css)

  #myBootstrapContainer * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
/* put every style which should be overwritten in here ...*/
}