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.

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.

• javascript
• jquery
• html
• css
• twitter-bootstrap

2 Answers 2

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./bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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.

You just have to include bootstrap.bundle.js along with jquery and bootstrap.js in following order

1. jquery.min.js
2. bootstrap.min.js
3. bootstrap.bundle.min.js