Bootstrap tab is working but the tab content is not showing

by

👍:0

You are including the JavaScript, but aren’t targeting the tab elements with it. From the docs, you also need to add in a bit of JavaScript to specifically target those tabs.

Alternatively, you should be able to add data-toggle="tab" to each of your dashboard_menu li elements.

👍:0

In your code you have:

<ul class="list-inline pull-right" role="tablist">
  <li class="active"><a href="#ussgemonth" role="tab" data-toggle="tab">Usage</a></li>
  <li><a href="#coletsmonth" role="tab" data-toggle="tab">Monthly</a></li>
</ul>

But you have no .tab-pane‘s with the id’s: id=”ussgemonth” & id=”coletsmonth”

Not only do you have 2 missing .tab-pane with these ids — since these are nested you have to follow the same structure as the parent.

Leave a comment