clarify some stuff about small navbar; also renamed navbar-condensed to -sm

docs/components/navbar.md

@@ -69,26 +69,26 @@ Add an `.inline-form` within the navbar with nearly any combination of form cont
 
 ### 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
@@ -155,12 +155,14 @@ Replace `.navbar-default` with `.navbar-inverse` for a darker background color a
 </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>
@@ -184,7 +186,7 @@ Condensed navbars provide a similar aesthetic to Bootstrap 3's navbar. It cuts t
   </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>
@@ -241,5 +243,3 @@ For more complex navbar patterns, like those used in Bootstrap v3, use the `.nav
   </div>
 </nav>
 {% endexample %}
-
-