-1

I need to use both, bootstrap 2 and bootstrap 3 on the same page. I do not want to use <iframe>s. Is it possible to compile Bootstrap 3, Bootstrap 2 by less in the way that it will work locally with some HTML 5 tag or inside element specified by id. An example (first is Bootstrap 2, second is Bootstrap 3 navbar):

.navbar {
  *position: relative;
  *z-index: 2;
  margin-bottom: 20px;
  overflow: visible;
  color: #777777;
}

.navbar {
  position: relative;
  z-index: 1000;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

In this case, both will work on elements with class navbar. I want to change it as you can see below by using Bootstrap compilation:

.B2WorksHere .navbar {
  *position: relative;
  *z-index: 2;
  margin-bottom: 20px;
  overflow: visible;
  color: #777777;
}

.B3WorksHere .navbar {
  position: relative;
  z-index: 1000;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

Then Bootstrap 2 will work inside elements with B2WorksHere and Bootstrap 3 will work inside elements with B3WorksHere. I can do it without any compilation tool, but I am wondering if javaScripts from Boostrap works properly, does it?

Is my idea possible? Or do you have some other solution which can help me achieve this behaviour?

cimmanon
  • 67,211
  • 17
  • 165
  • 171
koralgooll
  • 392
  • 1
  • 3
  • 12

1 Answers1

1

If you get access to the .less files you can put everything inside a class to act like a wrapper like so

.bs2{
   //bootstrap2 classes here
}

.bs3{
 //boostrap3 classes here
}

And the HTML would be like so:

<div class="bs2">
   <div class="navbar"> </div>
</div>

For the Javascript part I don't think it will work since both versions have different behaviors. You'd have to edit every function to only look for elements with ".bs2 .x" class instead of just ".x"

Diogo
  • 176
  • 3