CODEWITHSUNDEEP
jqueryhtmlcsstabstwitter-bootstrap-2
MKB
MKB

Reputation: 7619

Full width tabs with sufficient space to each tab

I have bootstrap tabs in my view that represents day of week. Tabs take width by content in the tab and its not occupying the full width in the page.

enter image description here

My requirement is full width tabs. I googled for it and found several answers but all of them giving equal width to each tab (Full width tabs using Bootstrap (Support IE)). Answers are good but in my case one tab is not getting sufficient space and hence content is split into two lines (Wednesday, July 16).

enter image description here

So how to create full width tabs with sufficient space to each tab? Today tab have space available that space can be given to other tabs.

EDIT.....................................................................................

Using bootstrap 2.3.2

Upvotes: 1

Views: 1602

Answers (3)

gelevanog
gelevanog

Reputation: 146

see this fiddle http://jsfiddle.net/ZdU8j/ The main properties are display: table-cell and width: 1%

Upvotes: 1

parchment
parchment

Reputation: 4002

If it's bootstrap, you should be able to use the nav-justified class.

http://getbootstrap.com/components/#nav-justified

nav-justified

Upvotes: 2

user1791574
user1791574

Reputation: 1749

Try this:

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li class="extraWidth"><a href="#messages" data-toggle="tab">Messagesssssss</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<style type="text/css">
.nav-tabs li {
    width: 24%;
}
.extraWidth {
    width: 28%;
}
</style>

You should provide some percentage of width for all and extra percentage of width for larger tab. Make sure that total width percentage should be 100%.

Upvotes: 0

Related Questions