Search code examples
jqueryhtmlcsstabstwitter-bootstrap-2

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

Solution

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

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

    nav-justified