Ads by ProfitSence
Close

Decrease NavBar height in Bootstrap

Last Updated on Wednesday 5th Oct 2022

Bootstrap 4 navbar Height

Nav Height

By Default Bootstrap had 15px top and bottom padding.

BootStrap NavBar Height

  • You can override an default styling in your CSS File with .navbar.
  • Decreasing the Navbar height is easy with the spacing utils.
  • Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.

NavBar Height

			
					<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 py-0 class sets padding-top:0;padding-bottom:0 on the items.

Change Height of BootStrap Navbar

			
					.navbar{
    min-height:12px;
}
.navbar  a {
    font-size: 11.2px;
}

			
	

References