### Containers
-Although it's not required, you can wrap a navbar in a `.container` or add one within for basic horizontal control.
+Although it's not required, you can wrap a navbar in a `.container` to center it on a page, or add one within to only center the contents of the navbar.
{% example html %}
-<nav class="navbar navbar-default">
- <div class="container">
+<div class="container">
+ <nav class="navbar navbar-default">
<h3 class="navbar-brand">
<a href="#">Navbar</a>
</h3>
- </div>
-</nav>
+ </nav>
+</div>
{% endexample %}
{% example html %}
-<div class="container">
- <nav class="navbar navbar-default">
+<nav class="navbar navbar-default">
+ <div class="container">
<h3 class="navbar-brand">
<a href="#">Navbar</a>
</h3>
- </nav>
-</div>
+ </div>
+</nav>
{% endexample %}
### Alignment
</nav>
{% endexample %}
-### Condensed
+### Small navbar
+
+Small navbars provide a similar aesthetic to Bootstrap 3's navbar. It cuts the padding down, enables full-height navigation, and tweaks vertical alignment for search forms, buttons, and more. It's also available in both default and inverse schemes.
-Condensed navbars provide a similar aesthetic to Bootstrap 3's navbar. It cuts the padding down, enables full-height navigation, and tweaks vertical alignment for search forms, buttons, and more. It's also available in both default and inverse schemes.
+When moving from a regular navbar to a small one, be sure to update your inputs and buttons to use their small variations as well.
{% example html %}
-<nav class="navbar navbar-default navbar-condensed">
+<nav class="navbar navbar-default navbar-sm">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
</form>
</nav>
-<nav class="navbar navbar-inverse navbar-condensed">
+<nav class="navbar navbar-inverse navbar-sm">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
</div>
</nav>
{% endexample %}
-
-