Bootstrap 4 Tabs Not Linking

Question

I am wondering why I can't get the bootstrap tabs to correspond to links. I've tried a bunch of solutions on stackoverflow, but the code structure all looks different than mine because I presume they're not bootstrap 4.

Here is the html from Tabs Using Data Attributes

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
    </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">...</div>
    <div class="tab-pane" id="profile" role="tabpanel">...</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

Using this JS from another post does actually change the link to include #page when clicking on tabs, but if i enter that address, it always goes back to the homepage:

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href="#' + url.split('#')[1] + '-tab"]').tab('show');
} //add a suffix

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})

I do apologize that this question has been asked in different iterations other places, but I have not seen the base question (i.e., how to do this with the starter code from bootstrap) answered.

Answer 1

Your markup is good.
Which means you probably have an error in your console. Please make sure you loaded these scripts, in this order:

• jquery(.min).js
• popper(.min).js (used to be tether(.min).js in older versions)
• bootstrap(.min).js

There are many ways to get them, but the safest route is to go to Bootstrap v4 and scroll down to Bootstrap CDN.

Your markup + correct scripts =

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
    </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">Home</div>
    <div class="tab-pane" id="profile" role="tabpanel">Profile</div>
    <div class="tab-pane" id="messages" role="tabpanel">Messages</div>
    <div class="tab-pane" id="settings" role="tabpanel">Settings</div>
</div>

Note you do not need any extra javascript to make it work, it's all included into bootstrap.js.