I have been working with bootstrap 4 and I recently tried to implement tabs based on the documentation. However, I am facing an issue where the tabs are not switching properly. Here is a snippet of my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Info</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
</head>
<body>
<?php include_once("template_pageTop.php"); ?>
<div class="container p-t-md">
<div class="row">
<div class="col-md-6">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#currentPreferences">Current Preferences</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#alternative"> Alternative </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="currentPreferences">
<ul class="list-group media-list media-list-stream">
<?php
display();
?>
</ul>
</div>
<div role="tabpanel" class="tab-pane fade in" id="alternative">
<ul class="list-group media-list media-list-stream">
<p>Test</p>
</ul>
</div>
</div>
</div>
</div>
</div>
<?php include_once("template_pageBottom.php"); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"> </script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
Despite adding all the necessary JavaScript libraries, the tab functionality is still not working as expected. Is there something else that needs to be included in the code? Any advice or feedback would be greatly appreciated. Thank you