Is there a problem with using two different bootstrap versions?

Question

Is there a problem with using two different bootstrap versions?

Navigation

#1 by (4 votes)

0

Well I have a problem, I have a project in Cordova that was using the bootstrap 3.3.7 but in this very I'm going to pass everything to the bootstrap 4.0.0, but I thought to leave the 2 in the project because each one has different css. I wonder if there is a problem about this!

html css apache-cordova bootstrap

asked by anonymous 07.03.2018 / 16:13

1 answer

check if data exists in the database Send array to PHP via Ajax

score 4 · Accepted Answer

In most situations, what will happen is the element take the version of the style Bootstrap which was included last, as in the two examples below:

Version 4

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-primary">Botão Bootstrap 4</button>

Version 3

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-primary">Botão com Bootstrap 3</button>

Now, some elements may be conflict, as in the example below, where the arrow down the dropdown ends up out of position using a .btn-group and%% .dropdown :

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="btn-group" role="group" aria-label="...">

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown com conflito
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown 1</a></li>
      <li><a href="#">Dropdown 2</a></li>
    </ul>
  </div>
</div>

Conclusion In addition to style of conflict, there may be conflicts between the JS of the two versions, unless you divide your application into two different blocks for each version of Bootstrap non-aho it's a good idea to keep both in the same project, I recommend migrating the old version to the v4 , or use the v3 in this new part.

OBS:

Testing done in Chrome Win 10.