Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set height and border of bootstrap tabs?

I have created a modal and a nav-tab in that modal .There are 2 issues.

  • First is that those tabs are very large in height ,I want to set their height a bit less in size .I have tried to set their height using css height property,but its not working for me.

  • My second issue is that, when particular tab is opened then the border-bottom/ line showing at bottom of that tab is not getting hidden,as it should do normally.I want to hide that bottom line of the tab when it is open .

So, please can anyone help me to solve the above issues.
Here is the image of my modal with the tabs: enter image description here

here is my code for these tabs (i am avoiding unnecessary code):

<div class="tabbable" >
    <ul class="nav nav-tabs" ><!--tabs-->
          <li  style="position:absolute;margin-left:0px;height:50px;" id="logintab">
               <a href="#pane_login" data-toggle="tab" id="logintab_a">Login</a></li>
          <li  class="active" style="margin-left:70px;" id="reg_tab" >
              <a href="#pane_reg" data-toggle="tab" id="regtab_a">Registration</a></li>
    </ul>
    <div class="tab-content"><!--login tab content-->
        <div id="pane_login" class="tab-pane active">
        </div>
     </div>

     <div class="tab-content"><!--login tab content-->
        <div id="pane_register" class="tab-pane active">
        </div>
     </div>
</div><!--/Tabbable-->
like image 495
sachin_ware Avatar asked Oct 31 '13 05:10

sachin_ware


1 Answers

Sharing my solution just in case someone else has to adjust the height:

.nav-tabs > li > a
{
    /* adjust padding for height*/
    padding-top: 4px; 
    padding-bottom: 4px;
}

The second issue could be resolved by adjusting margin of active anchor

.nav-tabs > li.active > a:focus, .nav-tabs > li.active > a
{
    margin-top: 1px;
}
.nav-tabs > li {
    margin-bottom: 0px; 
}
.nav-tabs > li.active {
    margin-bottom: -1px;    
}
like image 161
somedude Avatar answered Sep 27 '22 19:09

somedude