Bootstrap tabbed pane displaying all tabs on load

Question

my code is displaying all tabs on load. If I remove "active" from the other tabs, they won't display the graphs in their respective panes. How is this fixable? I'm using bootstrap.

<div class ="container col-sm-12 col-md-12 col-lg-12">
<div id="monitor" class="panel panel-default tab-box">
    <div class="panel-heading" style="height: 60px">
         <h3 class="panel-title" style = "margin-bottom: 5px">
            <i class="fa fa-flag"></i>
            Steps count
        </h3>
        <ul class="nav nav-tabs">
            <!-- Week tab -->
            <li class="active"> <a href="#week-tab" data-toggle="tab" data-identifier="line">Week</a></li>
            <!-- Month tab -->
            <li> <a href="#month-tab" data-toggle="tab" data-identifier="bar2">Month</a></li>
            <!-- Year -->
            <li> <a href="#year-tab" data-toggle="tab" data-identifier="bar3">Year</a></li>
        </ul>
    </div>
    <div class="panel-body">
        <div class="tab-content">
            <div id="week-tab" class="tab-pane active">
                <div class="row" style="margin-left: 10px">

                <div id="week_step-line" class = "graph" ></div>

                </div>

            </div>
            <div id="month-tab" class="tab-pane active">
                <div class="row" style="margin-left: 10px">

                <div id="month_step-line" class = "graph" ></div>

                </div>
            </div>

            <div id="year-tab" class="tab-pane active">
                <div class="row" style="margin-left: 10px">

                    <div id="year_step-line" class = "graph" ></div>

                </div>
            </div>
        </div>
    </div>
</div>

Added a picture of my problem. My morris chart has too little space if I don't have all the tabs as active.

https://i.sstatic.net/u25Ad.jpg

Answer 1

This works fine.. DEMO

<div class="panel panel-default">
    <div class="panel-heading">
        Steps count
    </div>
    <div class="panel-body">
        
        <div role="tabpanel">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#Week" aria-controls="home" role="tab" data-toggle="tab">Week</a>
                </li>
                <li role="presentation">
                    <a href="#Month" aria-controls="profile" role="tab" data-toggle="tab">Month</a>
                </li>
                <li role="presentation">
                    <a href="#Year" aria-controls="messages" role="tab" data-toggle="tab">Year</a>
                </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="Week">1...</div>
                <div role="tabpanel" class="tab-pane" id="Month">2...</div>
                <div role="tabpanel" class="tab-pane" id="Year">3...</div>
            </div>
        </div>
    </div>
</div>