How to make bootstrap 3 tab nav active by default?

Question

Using bootstrap 3 I am trying this exameple, using class="active" in the li element. Unfortunatelly when the page initially shows up neither tab pane is shown, the whole tab content is empty. The tab navs displayed correctly and when I explicitly click on a tab, the correct pane show up.

What I am missing?

Thanks in advance.

<ul class="nav nav-tabs">
    <li class="active"><a href="#graduation" data-toggle="tab">graduation</a></li>
    <li><a href="#graduate" data-toggle="tab">graduate</a></li>
    <li><a href="#extension" data-toggle="tab">extension</a></li>
</ul>
<div class="tab-content" id="TabContent">
    <div class="tab-pane fade" id="graduation">
        <p>
            anything
        </p>
    </div>
    <div class="tab-pane fade" id="graduate">
        <p>
            graduate
        </p>
    </div>
    <div class="tab-pane fade" id="extension">
        <p>
            extension
        </p>
    </div>
</div>

Answer 1

You also need to specify the active class on the default tab-pane (and for fading tabs you need to add the in class), thus you should change

<div class="tab-pane fade" id="graduation">

to

Bootstrap 3

<div class="tab-pane fade in active" id="graduation">

Bootstrap 4

<div class="tab-pane fade show active" id="graduation">

Answer 2

Bootstrap 4

<div class="tab-pane fade show active" id="graduation">
<div class="tab-pane fade" id="graduation">

Bootstrap 3

<div class="tab-pane fade in active" id="graduation">
<div class="tab-pane fade in" id="graduation">