Changing the height of Bootstrap's nav-pills

Question

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.

JSFiddle

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

<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>
</ul>

Answer 1

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.

Answer 2

If you are using bootstrap 4, try using p- for padding or m- for margin

        <li class="nav-item">
            <a class="nav-link p-2" id="pills-listado-tab" data-toggle="pill" href="#pills-listado" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
        </li>