CODEWITHSUNDEEP
twitter-bootstraptabs
DCR
DCR

Reputation: 15665

How to align Title placement in Tabs using bootstrap

I'm using a <a href> tag for a title for my last tab. It gets placed at the bottom on the tab instead of the top like the others. Is there a way to fix this with css?

here's the html code:

<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#tabs-first"  role="tab" data-toggle="tab">Boat<br>Times   </a></li>
<li>               <a href="#tabs-second" role="tab" data-toggle="tab">General         </a></li>
<li>               <a href="#tabs-third " role="tab" data-toggle="tab">What To<br>Bring</a></li>
<li>               <a href="#tabs-fourth" role="tab" data-toggle="tab">LINKS           </a></li>
<li>               <a href="#tabs-fifth " role="tab" data-toggle="tab"><a href="crew.php">Crew</a></a></li>
</ul>

and here's a js fiddle: TAB TITLES

Upvotes: 0

Views: 46

Answers (2)

Pragyakar
Pragyakar

Reputation: 642

The nested anchor tags is what is creating the problem there but if you want to make it work with nested anchor tags then try this:

<li>
    <a href="#tabs-fifth " role="tab" data-toggle="tab" style="padding:0;">
        <a href="crew.php">Crew</a>
    </a>
</li>

All i have done is added the inline CSS. Hope this helps.

Upvotes: 1

DCR
DCR

Reputation: 15665

set border and padding to 0 on outer

Upvotes: 0

Related Questions