English
Українська
Deutsch
España
РусскийLarge navbar
Increase height of the navbar by adding .navbar-lg class to the main .navbar container. Large navbar height is ~54px including borders, all navbar components are adjusted to the large navbar height automatically. If navbar type is fixed, add .navbar-lg-top class to the <body> container to set top padding and/or .navbar-lg-bottom class if navbar placement is bottom to set bottom padding.
Large navbar example:
Large static navbar markup:
<!-- Document body -->
<body>
<!-- Large static navbar -->
<div class="navbar navbar-dark navbar-lg navbar-expand-md">
<!-- Brand and toggler -->
<div class="navbar-header">...</div>
<div class="d-md-none">...</div>
<!-- /brand and toggler -->
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-main">
...
</div>
<!-- /navbar content -->
</div>
<!-- /large static navbar -->
</body>
<!-- /document body -->
Large fixed navbar markup:
<!-- Document body -->
<body class="navbar-lg-top">
<!-- Large fixed navbar -->
<div class="navbar navbar-dark navbar-lg navbar-expand-md fixed-top">
<!-- Brand and toggler -->
<div class="navbar-header">...</div>
<div class="d-md-none">...</div>
<!-- /brand and toggler -->
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-main">
...
</div>
<!-- /navbar content -->
</div>
<!-- /large fixed navbar -->
</body>
<!-- /document body -->
Default navbar
Default navbar height is ~50px including borders. Navbar container doesn't have any height properties in CSS, so if you change vertical padding of navbar navigation items or brand height, computed navbar height will be adjusted automatically thanks to power of SASS. If navbar type is fixed, add .navbar-top class to the <body> container to set top padding and/or .navbar-bottom class if navbar placement is bottom to set bottom padding.
Default navbar example:
Default static navbar markup:
<!-- Document body -->
<body>
<!-- Default static navbar -->
<div class="navbar navbar-dark navbar-expand-md">
<!-- Brand and toggler -->
<div class="navbar-header">...</div>
<div class="d-md-none">...</div>
<!-- /brand and toggler -->
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-main">
...
</div>
<!-- /navbar content -->
</div>
<!-- /default static navbar -->
</body>
<!-- /document body -->
Default fixed navbar markup:
<!-- Document body -->
<body class="navbar-top">
<!-- Default fixed navbar -->
<div class="navbar navbar-dark navbar-expand-md fixed-top">
<!-- Brand and toggler -->
<div class="navbar-header">...</div>
<div class="d-md-none">...</div>
<!-- /brand and toggler -->
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-main">
...
</div>
<!-- /navbar content -->
</div>
<!-- /default fixed navbar -->
</body>
<!-- /document body -->
Small navbar
Decrease height of the navbar by adding .navbar-sm class to the main .navbar container. Small navbar height is ~46px including borders, all navbar components are adjusted to the large navbar height automatically. If navbar type is fixed, add .navbar-sm-top class to the <body> container to set top padding and/or .navbar-sm-bottom class if navbar placement is bottom to set bottom padding.
Small navbar example:
Small static navbar markup:
<!-- Document body -->
<body>
<!-- Small static navbar -->
<div class="navbar navbar-dark navbar-sm navbar-expand-md">
<!-- Brand and toggler -->
<div class="navbar-header">...</div>
<div class="d-md-none">...</div>
<!-- /brand and toggler -->
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-main">
...
</div>
<!-- /navbar content -->
</div>
<!-- /small static navbar -->
</body>
<!-- /document body -->
Small fixed navbar markup:
<!-- Document body -->
<body class="navbar-sm-top">
<!-- Small fixed navbar -->
<div class="navbar navbar-dark navbar-sm navbar-expand-md fixed-top">
<!-- Brand and toggler -->
<div class="navbar-header">...</div>
<div class="d-md-none">...</div>
<!-- /brand and toggler -->
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-main">
...
</div>
<!-- /navbar content -->
</div>
<!-- /small fixed navbar -->
</body>
<!-- /document body -->
Size combinations
Multiple navbars support different heights as well, just add optional height classes to both navbars. If navbar type is fixed, add .navbar-[size]-[size]-top to the <body> container to set top padding and/or .navbar-[size]-[size]-bottom class if navbar placement is bottom to set bottom padding. Example: add .navbar-md-sm-top class to <body> if first navbar has default height and second has small.
Sizes of static multiple navbars:
Markup of static multiple navbars:
<!-- Document body -->
<body>
<!-- First navbar -->
<div class="navbar navbar-dark bg-teal-400 navbar-expand-md">
<!-- Navbar content -->
<div class="navbar-header">
...
</div>
<div class="d-md-none">
...
</div>
<div class="collapse navbar-collapse" id="navbar-first">
...
</div>
<!-- /navbar content -->
</div>
<!-- /first navbar -->
<!-- Second navbar -->
<div class="navbar navbar-dark bg-slate-700 navbar-sm navbar-expand-md">
<!-- Navbar content -->
<div class="navbar-header">
...
</div>
<div class="d-md-none">
...
</div>
<div class="collapse navbar-collapse" id="navbar-second">
...
</div>
<!-- /navbar content -->
</div>
<!-- /second navbar -->
</body>
<!-- /document body -->
Markup of fixed multiple navbars:
<!-- Document body -->
<body class="navbar-md-sm-top">
<!-- First navbar -->
<div class="navbar navbar-dark bg-teal-400 navbar-expand-md">
<!-- Navbar content -->
<div class="navbar-header">
...
</div>
<div class="d-md-none">
...
</div>
<div class="collapse navbar-collapse" id="navbar-first">
...
</div>
<!-- /navbar content -->
</div>
<!-- /first navbar -->
<!-- Second navbar -->
<div class="navbar navbar-dark bg-slate-700 navbar-sm navbar-expand-md">
<!-- Navbar content -->
<div class="navbar-header">
...
</div>
<div class="d-md-none">
...
</div>
<div class="collapse navbar-collapse" id="navbar-second">
...
</div>
<!-- /navbar content -->
</div>
<!-- /second navbar -->
</body>
<!-- /document body -->