aboutsummaryrefslogtreecommitdiff
path: root/docs/components
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2015-06-22 16:30:52 -0700
committerMark Otto <[email protected]>2015-06-22 16:30:52 -0700
commit9b5fe0ca4688c2fd316f10c83cc1c3b8fa30b98f (patch)
tree646dc33dcf224db829c868664a3b813b5b1dadf0 /docs/components
parentce9c0f0125ffcebf20d993a70ca2d6348bdd8336 (diff)
downloadbootstrap-9b5fe0ca4688c2fd316f10c83cc1c3b8fa30b98f.tar.xz
bootstrap-9b5fe0ca4688c2fd316f10c83cc1c3b8fa30b98f.zip
clarify some stuff about small navbar; also renamed navbar-condensed to -sm
Diffstat (limited to 'docs/components')
-rw-r--r--docs/components/navbar.md30
1 files changed, 15 insertions, 15 deletions
diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 1e53de16b..f45ee5876 100644
--- a/docs/components/navbar.md
+++ b/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 %}
-
-