I am trying to use bootstrap and twitter bootstrap at the same time. Basically, I can’t seem to get them to work together. Are they even supposed to work together? You can see the js Fiddle here. https://jsfiddle.net/paralaxwombat/v7hpoc6m/4/
There are two sets of bootstrap call lines.
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
If you remove one of them, the nav bar works and the bottom doesn’t. If you remove the bottom the nav bar doesn’t work but the bottom does.
I am wondering if there is a workaround.
3
Answers
Twitter Bootstrap is Bootstrap. You are trying to mix version 3 and version 4.
They are not designed to work together. Bootstrap 4 is designed to completely replace Bootstrap 3.
Use version 4. Change the code which is following version 3 conventions to use version 4 conventions.
You are trying to use two different versions of the same library so I think the answer will be ‘No’.
I don’t know if there’s a document with all the similarities and differences, but I know the 3.3 javascript api and the 4.1 javascript api conflict.
There are 2 versions of bootstrap and you are trying to use both of them at the same time. These are all versions of bootstrap Versions. If you want to know more about them check bootstrap.