CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapbootstrap-tabs
Pink Code
Pink Code

Reputation: 1834

add div columns into bootstrap tabs content

I work with bootstrap 3 tabs and style using X-tabs plugin like this :

HTML : 

<div class='tabs-x tabs-below'>
    <div id="myTabContent-2" class="tab-content">
        <div class="tab-pane fade in active" id="home-2">
            <div class="col-xs-4 col-md-2">
                <p>The FALSE Tabs</p>
            </div>
        </div>
        <div class="tab-pane fade" id="profile-2">
            <p>The True TaBs WORKED</p>
        </div>
    </div>
    <ul id="myTab-2" class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#home-2" role="tab" data-toggle="tab">Home</a>

        </li>
        <li><a href="#profile-2" role="tab-kv" data-toggle="tab">Profile</a>

        </li>
    </ul>
</div>

i add in tabs content new div like this :

<div class="col-xs-4 col-md-2"></div>

In action this div show in out of tabs content and not work. how do can i fix this problem ?!

DEMO FIDDLE (check first tab and see problem, second tab worked true)

Upvotes: 3

Views: 3850

Answers (1)

MakG
MakG

Reputation: 1274

The problem is that you create a bootstrap column without a row in your Home tab content. Columns in bootstrap are floated, you need to either clear floats manually or just wrap it a .row div.

You can see examples of Bootstrap grid templates here: http://getbootstrap.com/examples/grid/

Demo: http://jsfiddle.net/ce4xcyay/2/

<div class='tabs-x tabs-below'>
    <div id="myTabContent-2" class="tab-content">
        <div class="tab-pane fade in active" id="home-2">
            <div class="row">
                <div class="col-xs-4">
                    <p>The FALSE Tabs</p>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="profile-2">
            <p>The True TaBs WORKED</p>
        </div>
    </div>
    <ul id="myTab-2" class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#home-2" role="tab" data-toggle="tab">Home</a>

        </li>
        <li><a href="#profile-2" role="tab-kv" data-toggle="tab">Profile</a>

        </li>
    </ul>
</div>

Upvotes: 7

Related Questions