Edgar Navasardyan Edgar Navasardyan - 1 year ago 195
CSS Question

Changing the height of Bootstrap's nav-pills

This topic is quite close to what I am looking for, but still didn't help to rich the goal after several hours. I'm just trying to decrease a bit the height of bootstrap tab pills by editing the original Bootstrap.css file.


I've removed the original file link from the External resources and placed the raw code in the css section so that it's possible to experiment

enter image description here

<ul class="nav nav-pills" id="task_management_tab">
<li class="active"><a data-toggle="pill" href="#tasks_private">A</a></li>
<li><a data-toggle="pill" href="">B</a></li>
<li><a data-toggle="pill" href="">C</a></li>
<li><a data-toggle="pill" href="">D</a></li>

Answer Source

For nav pills, decrease the padding like so:

.nav>li>a {
    padding-top: 5px;
    padding-bottom: 5px;

The default is 10px

I'd suggest not amending the actual bootstrap css though as it'll affect a number of other things. Target your nav pills with your own custom class.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download