Bootstrap framework column not working in tab-content

Question

I want to include col-md-4 in content-tab but that not working image or text not hide if i click next tab. My target is Ihover plugins in 3 column but if i click next tab previous not hide

<ul class="nav nav-pils nav-justified">
    <li class="active"><a data-toggle="tab" href="#webdesign">test1</a></li>
    <li><a data-toggle="tab" href="#loga">test2</a></li>
    <li><a data-toggle="tab" href="#dtp">test3</a></li>
    <li><a data-toggle="tab" href="#android">test4</a></li>
</ul>

<div class="tab-content">
    <div id="webdesign" class="section">
            <div class="col-md-4">
                <h1>fbbvasvba</h1>
            </div>
            <div class="col-md-4">
                <h1>fbbvasvba</h1>
            </div>
            <div class="col-md-4">
                <h1>fbbvasvba</h1>
            </div>
        </div>
        <div id="loga" class="tab-pane fade">
            <div id="dtp" class="tab-pane fade">
                <h1>TEST</h1>
            </div>
            <div id="android" class="tab-pane fade">
                <h1>TEST</h1>
        </div>
    </div>
</div>

Answer 1

It isn't working because Bootstrap columns must be a child of an element with the row class. Try this:

<ul class="nav nav-pills nav-justified">
    <li class="active"><a data-toggle="tab" href="#webdesign">test1</a></li>
    <li><a data-toggle="tab" href="#loga">test2</a></li>
    <li><a data-toggle="tab" href="#dtp">test3</a></li>
    <li><a data-toggle="tab" href="#android">test4</a></li>
</ul>

<div class="tab-content">
    <div id="webdesign" class="section">
        <div class="row">
            <div class="col-md-4">
                <h1>fbbvasvba</h1>
            </div>
            <div class="col-md-4">
                <h1>fbbvasvba</h1>
            </div>
            <div class="col-md-4">
                <h1>fbbvasvba</h1>
            </div>
        </div>
        <div id="loga" class="tab-pane fade">
            <div id="dtp" class="tab-pane fade">
                <h1>TEST</h1>
            </div>
            <div id="android" class="tab-pane fade">
                <h1>TEST</h1>
            </div>
        </div>
    </div>
</div>

Answer 2

It is not working because loga, dtp and android tabs are child of webdesign tab. Hence, webdesign tab will display on default.

Try this:

<ul class="nav nav-pils nav-justified">
    <li class="active"><a data-toggle="tab" href="#webdesign">test1</a></li>
    <li><a data-toggle="tab" href="#loga">test2</a></li>
    <li><a data-toggle="tab" href="#dtp">test3</a></li>
    <li><a data-toggle="tab" href="#android">test4</a></li>
</ul>

<div class="tab-content">
    <div id="webdesign" class="section">
        <div class="">
            <div class="col-md-4">
                <h1>fbbvasvba</h1>
            </div>
            <div class="col-md-4">
                <h1>fbbvasvba</h1>
            </div>
            <div class="col-md-4">
                <h1>fbbvasvba</h1>
            </div>
        </div>
    </div>
    <div id="loga" class="tab-pane fade">
        <div id="dtp" class="tab-pane fade">
            <h1>TEST</h1>
        </div>
        <div id="android" class="tab-pane fade">
            <h1>TEST</h1>
        </div>
    </div>

</div>

Answer 3

This markup needed considerable cleanup, it's always a great idea to refer to the Bootstrap documentation for tabs and nav pills when you hit problems. Here's the code you need:

<ul class="nav nav-pills nav-justified">
  <li class="active"><a data-toggle="tab" href="#webdesign">test1</a></li>
  <li><a data-toggle="tab" href="#loga">test2</a></li>
  <li><a data-toggle="tab" href="#dtp">test3</a></li>
  <li><a data-toggle="tab" href="#android">test4</a></li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="webdesign">
    <div class="row">
      <div class="col-md-4">
        <h1>col1</h1>
      </div>
      <div class="col-md-4">
        <h1>col2</h1>
      </div>
      <div class="col-md-4">
        <h1>col3</h1>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="loga">
    tab loga
  </div>
  <div role="tabpanel" class="tab-pane" id="dtp">
    tab dtp
  </div>
  <div role="tabpanel" class="tab-pane" id="android">
    tab android
  </div>
</div>

Not sure I'd mix and match between nav-pills and nav-tabs , but that's your prerogative.

Answer 4

TL&DR : When using a col-* you need to make sure it has a parent that is a div class="row". The rational is a row establishes a complete boundary (end-to-end) and a col-* breaks that boundry into 'columns'/'sections'.

Solutions : Is provided by the accepted answer; This provides additional justification.

<div role="tabpanel" class="tab-pane active" id="webdesign">
<div class="row">
  <div class="col-md-4">
    <h1>col1</h1>
  </div>
  <div class="col-md-4">
    <h1>col2</h1>
  </div>
  <div class="col-md-4">
    <h1>col3</h1>
  </div>
</div>