Navbars - Sizing
Increase height of the navbar by adding .navbar-lg class to the main navbar container. Large navbar height is 48px, all navbar components will be adjusted to the large navbar height automatically. If navbar type is fixed, add .navbar-top-lg to the <body> tag to set top padding and/or .navbar-bottom-lg class if navbar position is bottom to set bottom padding.
Navbar preview
Markup example
<!-- Large navbar -->
<div class="navbar navbar-inverse navbar-lg">
<div class="navbar-header">...</div>
<ul class="nav navbar-nav">...</ul>
<ul class="nav navbar-nav navbar-right">...</ul>
</div>
<!-- /large navbar -->
Default navbar doesn't require any additional classes in main navbar container. Default navbar height is 46px, all navbar components will be adjusted to the default navbar height automatically. If navbar type is fixed, add .navbar-top to the <body> tag to set top padding and/or .navbar-bottom class if navbar position is bottom to set bottom padding.
Navbar preview
Markup example
<!-- Default navbar -->
<div class="navbar navbar-inverse">
<div class="navbar-header">...</div>
<ul class="nav navbar-nav">...</ul>
<ul class="nav navbar-nav navbar-right">...</ul>
</div>
<!-- /default navbar -->
Decrease height of the navbar by adding .navbar-sm class to the main navbar container. Small navbar height is 44px, all navbar components will be adjusted to the small navbar height automatically. If navbar type is fixed, add .navbar-top-sm to the <body> tag to set top padding and/or .navbar-botom-sm classes if navbar position is bottom to set bottom padding.
Navbar preview
Markup example
<!-- Small navbar -->
<div class="navbar navbar-inverse navbar-sm">
<div class="navbar-header">...</div>
<ul class="nav navbar-nav">...</ul>
<ul class="nav navbar-nav navbar-right">...</ul>
</div>
<!-- /small navbar -->
Set the smallest navbar height of 42px by adding .navbar-xs class to the main navbar container, all navbar components will be adjusted to the mini navbar height automatically. If navbar type is fixed, add .navbar-top-xs to the <body> tag to set top padding and/or .navbar-bottom-xs class if navbar position is bottom to set bottom padding.
Navbar preview
Markup example
<!-- Mini navbar -->
<div class="navbar navbar-inverse navbar-xs">
<div class="navbar-header">...</div>
<ul class="nav navbar-nav">...</ul>
<ul class="nav navbar-nav navbar-right">...</ul>
</div>
<!-- /mini navbar -->
Multiple navbars support different heights as well, just add optional height classes to both navbars. If navbar type is fixed, add .navbar-top-*-* to the <body> tag to set top padding and/or .navbar-bottom-*-* class if navbar position is bottom to set bottom padding. Example: add .navbar-top-sm-xs class to <body> if first navbar is small and second is mini.
Navbar preview
Markup example
<!-- Large navbar -->
<div class="navbar navbar-inverse navbar-lg">
<div class="navbar-header">...</div>
<ul class="nav navbar-nav">...</ul>
<ul class="nav navbar-nav navbar-right">...</ul>
</div>
<!-- /large navbar -->
<!-- Mini navbar -->
<div class="navbar navbar-default navbar-xs">
<div class="navbar-header">...</div>
<ul class="nav navbar-nav">...</ul>
<ul class="nav navbar-nav navbar-right">...</ul>
</div>
<!-- /mini navbar -->