Bootstrap 4 Tabs are not switching

javascript twitter-bootstrap bootstrap-4 twitter-bootstrap-4

15,337

You need to use data-toggle="tab" data attribute in each link, or initialize using JavaScript..

<ul class="nav nav-tabs">
     <li class="nav-item">
          <a class="nav-link active" data-toggle="tab" href="#currentPreferences">Current Preferences</a>
     </li>
     <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#alternative"> Alternative </a>
     </li>
     <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#">Link</a>
     </li>
</ul>

http://www.codeply.com/go/iHHBzDROEi

15,337

Author by

Ace

Updated on June 09, 2022

Comments

Ace almost 2 years

I am currently using bootstrap 4. I read the bootstrap documentation and am currently trying to incorporate tabs but they are not switching my code is the following:

<!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>

I have added the javascript libraries but it does not seem to be switching is there anything else I can add? Any feedback is welcomed. Thank you