Is it a problem to use two different versions of bootstrap?

Asked

Viewed 1,020 times

0

Well I have a problem, I have a project in Ordova that was using bootstrap 3.3.7 however in this very I am passing everything to bootstrap 4.0.0, but I thought to leave the 2 in the project because each one has different css. I wonder if there’s a problem with that !

html css bootstrap apache-cordova

  • I don’t think it’s a good idea, there will surely be conflicts

  • @Anthraxisbr, so in your opinion is a mistake?

  • I’ll give you an answer to show you what can happen

  • Here is the official Migration Guide https://getbootstrap.com/docs/4.0/migration/ another very basic point is that the Grid of one version is very different from the other! Even responsive "Break Points" have different measures for each other.

1 answer

4


In most situations, what will occur is the element taking the style of the version of Bootstrap which was last included, as in the 2 examples below:

Version 4 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="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>
<script src="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>
<script src="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>
<link href="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, in some elements, there may be conflict, as in the example below, where the down arrow of the dropdown ends up getting 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>
<script src="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>
<link href="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>

Completion In addition to style conflicts, there may be conflicts between JS of the two versions, unless you divide your application into two different blocks for each version of Bootstrap no As it is a good idea to keep both in the same project, I recommend migrating from the old version to the v4, or use the v3 in that new part.

OBS:

Testing done in Chrome Win 10.

  • Very well explained thank you! @

  • @Humbertovieira if solved his problem could click the green 'check' there in the corner to accept the answer, so other users will know that this doubt was solved ;D

Browser other questions tagged html css bootstrap apache-cordova

You are not signed in. Login or sign up in order to post.