Ads by ProfitSence

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
            <li class="nav-item">
                <a class="nav-link py-0">
                    <span class="icon icon18 icon-excel-file"></span> Export to Excel
        <span class="navbar-text py-0 color-blue">
        *Data Automatically pulled from sources

  • The py-0 class sets padding-top:0;padding-bottom:0 on the items.

Change Height of BootStrap Navbar

.navbar  a {
    font-size: 11.2px;