Large navbar
Increase size of the navbar navigation by adding .navbar-lg
class to the main .navbar container. Large navbar height is ~66px, almost
all navbar components are adjusted to the large navbar height automatically, some use
cases may require minor adjustments. You can also use padding utility classes to change
inner spacing.
Large navbar example:
Large navbar markup:
<!-- Main navbar -->
<div class="navbar navbar-lg navbar-dark navbar-expand-lg">
<div class="container-fluid">
<!-- Mobile togglers -->
<div class="d-flex d-lg-none me-2">
...
</div>
<!-- /mobile togglers -->
<!-- Navbar brand -->
<div class="d-inline-flex flex-1 flex-lg-0">
<a href="index.html" class="navbar-brand d-inline-flex align-items-center">
...
</a>
</div>
<!-- /navbar brand -->
<!-- Left content -->
<div class="flex-row">
...
</div>
<!-- /left content -->
<!-- Collapsible navbar content (center) -->
<div class="navbar-collapse justify-content-center flex-lg-1 order-2 order-lg-1 collapse" id="navbar-mobile">
...
</div>
<!-- /collapsible navbar content (center) -->
<!-- Right content -->
<div class="flex-row justify-content-end order-1 order-lg-2">
...
</div>
<!-- /right content -->
</div>
</div>
<!-- /main navbar -->
Default navbar
Default navbar height is ~62px. 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 the power of SASS. All sizes can be also changed in CSS variables without
build process, primary containers that control navbar height are .navbar
and .nav
Default navbar example:
Default navbar markup:
<!-- Main navbar -->
<div class="navbar navbar-dark navbar-expand-lg">
<div class="container-fluid">
<!-- Mobile togglers -->
<div class="d-flex d-lg-none me-2">
...
</div>
<!-- /mobile togglers -->
<!-- Navbar brand -->
<div class="d-inline-flex flex-1 flex-lg-0">
<a href="index.html" class="navbar-brand d-inline-flex align-items-center">
...
</a>
</div>
<!-- /navbar brand -->
<!-- Left content -->
<div class="flex-row">
...
</div>
<!-- /left content -->
<!-- Collapsible navbar content (center) -->
<div class="navbar-collapse justify-content-center flex-lg-1 order-2 order-lg-1 collapse" id="navbar-mobile">
...
</div>
<!-- /collapsible navbar content (center) -->
<!-- Right content -->
<div class="flex-row justify-content-end order-1 order-lg-2">
...
</div>
<!-- /right content -->
</div>
</div>
<!-- /main navbar -->
Small navbar
Decrease size of the navbar navigation by adding .navbar-sm
class to the main .navbar container. Small navbar height is ~58px, almost
all navbar components are adjusted to the small navbar height automatically, some use
cases may require minor adjustments. You can also use padding utility classes to change
inner spacing.
Small navbar example:
Small navbar markup:
<!-- Main navbar -->
<div class="navbar navbar-sm navbar-dark navbar-expand-lg">
<div class="container-fluid">
<!-- Mobile togglers -->
<div class="d-flex d-lg-none me-2">
...
</div>
<!-- /mobile togglers -->
<!-- Navbar brand -->
<div class="d-inline-flex flex-1 flex-lg-0">
<a href="index.html" class="navbar-brand d-inline-flex align-items-center">
...
</a>
</div>
<!-- /navbar brand -->
<!-- Left content -->
<div class="flex-row">
...
</div>
<!-- /left content -->
<!-- Collapsible navbar content (center) -->
<div class="navbar-collapse justify-content-center flex-lg-1 order-2 order-lg-1 collapse" id="navbar-mobile">
...
</div>
<!-- /collapsible navbar content (center) -->
<!-- Right content -->
<div class="flex-row justify-content-end order-1 order-lg-2">
...
</div>
<!-- /right content -->
</div>
</div>
<!-- /main navbar -->
Size combinations
Multiple navbars support different heights as well, just add optional height classes to both navbars. It doesn't matter if navbars are sticky, fixed or static - no additional classes or CSS required, everything works out of the box.
Sizes of static multiple navbars:
Markup of multiple navbars:
<!-- Main navbar -->
<div class="navbar navbar-dark navbar-expand-lg">
<div class="container-fluid">
<!-- Mobile togglers -->
<div class="d-flex d-lg-none me-2">
...
</div>
<!-- /mobile togglers -->
<!-- Navbar brand -->
<div class="d-inline-flex flex-1 flex-lg-0">
<a href="index.html" class="navbar-brand d-inline-flex align-items-center">
...
</a>
</div>
<!-- /navbar brand -->
<!-- Left content -->
<div class="flex-row">
...
</div>
<!-- /left content -->
<!-- Collapsible navbar content (center) -->
<div class="navbar-collapse justify-content-center flex-lg-1 order-2 order-lg-1 collapse" id="navbar-mobile">
...
</div>
<!-- /collapsible navbar content (center) -->
<!-- Right content -->
<div class="flex-row justify-content-end order-1 order-lg-2">
...
</div>
<!-- /right content -->
</div>
</div>
<!-- /main navbar -->
<!-- Second navbar -->
<div class="navbar navbar-sm navbar-expand-lg">
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-second">
...
</div>
<!-- /navbar content -->
</div>
<!-- /second navbar -->
