You are importing the Bootstrap 4.5.3 Javascript, but the Bootstrap 4.0 Beta 3 CSS.
Don't mix and match versions; import the same version of the CSS and Javascript.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
Introduction · Bootstrap v4.5[
^]
With the correct versions in place, your tabs work as expected:
Demo[
^]
You have some issues - an extra "s" on the contact tab's "class"; using
role="nav-item"
instead of
class="nav-item"
; using
aria controls
instead of
aria-controls
. Fixing those makes the contact tab align properly:
Updated demo[
^]
NB: Using
float
in the tab list doesn't work. You can see that the floated tab still appears in the same place. If you want it aligned to the right, you should add
class="ml-auto"
instead:
Final demo[
^]