CODEWITHSUNDEEP
javascriptcsstwitter-bootstraptabsnav
Misha Kondratev
Misha Kondratev

Reputation: 101

bootstrap nav header height

How to make the height of all names of the tabs same size? At LI the height is same, but if I do for A height: 100% nothing changes. Thanks 

simple bootstrap

example

Upvotes: 3

Views: 5757

Answers (1)

Trevor
Trevor

Reputation: 16116

You can use javascript

$(document).ready(function(){
   var highest = null;

   $(".nav-tabs a").each(function(){  //find the height of your highest link
       var h = $(this).height();
       if(h > highest){
          highest = $(this).height();  
       }    
    });

   $(".nav-tabs a").height(highest);  //set all your links to that height.
});

http://jsfiddle.net/wW2py/9/

For CSS you can do

.nav-tabs a {
   height: 62px;  
}

For your example 62px works, but you'll need to adjust it so that it is big enough to fit the tab with the most text. Also make sure you apply your css after the bootstrap css.

http://jsfiddle.net/p9eFQ/

Upvotes: 6

Related Questions