Changing the height of Bootstrap's nav-pills
<p><a href="https://stackoverflow.com/questions/19698925/how-to-set-height-and-border-of-bootstrap-tabs">This topic</a> 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.</p>

<p><a href="https://jsfiddle.net/oL1p7gf8/" rel="nofollow noreferrer">JSFiddle</a></p>

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

<p><a href="https://i.stack.imgur.com/7ZGlo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7ZGlo.png" alt="enter image description here"></a></p>

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