Using bootstrap only in a special div

Question

I use bootstrap in my TYPO3 frontend plugin, but I only want to use it in a special div, so that the class without_bootstrap won't be touched from the bootstrap classes.

For example

<div class="without_bootstrap">
     <div class="with_bootstrap">
     </div>
</div>

Is that possible?

Answer 1

Partially. If you avoid class names that are used by bootstrap, you should be fine. But bootstrap defines some tag-specific styles, such as

a {
  background-color: transparent
}

You can circumvent that by defining a style like that:

.without-bootstrap > a {
  /* whatever */
}

Example:

.wrapper {
  background-color:#f00;
}
.no-bootstrap > a {
  background-color:#fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <div class="no-bootstrap">
    <a href="#"> No Bootstrap</a>
    <div class="bootstrap">
      <a href="#"> With Bootstrap</a>
    </div>
  </div>
</div>

Another solution might be to customize bootstrap for your needs: http://getbootstrap.com/customize/