How do you decrease the height of the navbar in Bootstrap 4?
Below is my code for bootstrap 4
<nav class="navbar navbar-collapse navbar-toggleable-md navbar-light bg-faded ">
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link " >
<span class="icon icon18 icon-upload"></span>
Input Data From Prior Month
</a>
</li>
<li class="nav-item">
<a class="nav-link " >
<span class="icon icon18 icon-excel-file"></span>
Export to Excel
</a>
</li>
</ul>
<span class="navbar-text color-blue">
*Data Automatically pulled from sources
</span>
</div>
</nav>
there are some examples given for bootstrap 3 here How do I decrease the height of the navbar in Bootstrap 3? but none of them seem to work for bootstrap 4, can anyone help with that?
+3
source to share
1 answer
Decreasing the height of the Navbar is easier in Bootstrap 4 with utils spacing . The height of the navbar comes from the padding in the navbar content.
Just use py-0
in nav-link
and navbar-text
..
<nav class="navbar navbar-collapse navbar-toggleable-md navbar-light bg-faded ">
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link py-0">
<span class="icon icon18 icon-upload"></span> Input Data From Prior Month
</a>
</li>
<li class="nav-item">
<a class="nav-link py-0">
<span class="icon icon18 icon-excel-file"></span> Export to Excel
</a>
</li>
</ul>
<span class="navbar-text py-0 color-blue">
*Data Automatically pulled from sources
</span>
</div>
</nav>
The class py-0
sets padding-top:0;padding-bottom:0
in elements.
+5
source to share