7

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?

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
Felix
  • 5,452
  • 12
  • 68
  • 163
  • 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.... – Anurag Goel Feb 26 '15 at 13:36
  • can you give me an example? – Felix Feb 26 '15 at 13:38
  • @AnuragGoel BS styles body and many other elements afaik, not only .form-input, its grid(s) and so on. So I don't see how you'd not apply BS to a whole page by just adding non-BS classes to some elements... – FelipeAls Feb 26 '15 at 13:41
  • 1
    OP Do you use a preprocessor like LESS or Sass? Can you edit Bootstrap CSS file? You could apply top voted answer from this [related question](http://stackoverflow.com/a/10971228/137626) or mine – FelipeAls Feb 26 '15 at 13:45
  • possible duplicate of [wrap a .less css definitions in a namespace](http://stackoverflow.com/questions/8288463/wrap-a-less-css-definitions-in-a-namespace) – Joseph Marikle Feb 26 '15 at 18:09

1 Answers1

3

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/

mmgross
  • 3,064
  • 1
  • 23
  • 32
  • okay thanks, but in my case its not really suitable to do it in this ways. Is there a possibility to do it from the other way? can I kaplse bootstrap? – Felix Feb 26 '15 at 13:42
  • 1
    What exactly are you trying to accomplish anyway. In general bootstrap's style definition are not that destructive to have any need to overwrite them. – mmgross Feb 26 '15 at 13:44
  • Yes you can use iframe in place of div in which another webpage loads up with different css and js....and @mmgross is Right... – Anurag Goel Feb 26 '15 at 13:46
  • Iframe won't work. I have a fully finished and styled page. And a new typo3 frontend plugin wich uses BS, so now this plugin overwirdes my page css. – Felix Feb 26 '15 at 13:47
  • 1
    not that destructive > well, `* { box-sizing: border-box}` has a huge impact if you aren't already using this box model! (edit: I'd advise against using both models on the same page. Headaches incoming) – FelipeAls Feb 26 '15 at 13:48
  • just remove css from that plugin and apply your style in my opinion is best option rather than finding some workaround for bad plugin. – pankijs Feb 27 '15 at 21:02