diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index c10bea4d3e..ebeb0d8280 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -121,6 +121,9 @@
Basic navbar
Nav links
Forms in navbars
+ Buttons in navbars
+ Component alignment
+ Text in navbars
Fixed top navbar
Fixed bottom navbar
Static top navbar
diff --git a/docs/docs.html b/docs/docs.html
index 2b922b695d..e4f7113818 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3522,13 +3522,19 @@ For example, <section>
should be wrapped as inline.
{% endhighlight %}
- Component alignment
+
+ For buttons not residing in a <form>
, add this class to vertically center buttons within a navbar.
+
+
+ Component alignment
Align nav links, search form, or text, use the .pull-left
or .pull-right
utility classes. Both classes will add a CSS float in the specified direction.
- Using dropdowns
- Add dropdowns and dropups to the nav with a bit of markup and the dropdowns JavaScript plugin.
-
- Text
+ Text
Wrap strings of text in an element with .navbar-text
, usually on a <p>
tag for proper leading and color.
diff --git a/less/navbar.less b/less/navbar.less
index 88cb33bce3..9511670cd5 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -299,6 +299,15 @@
}
+
+// Buttons in navbar
+//
+// Vertically center a button within a navbar (when *not* in a form).
+
+.navbar-btn {
+ margin-top: ((@navbar-height - @input-height-base) / 2);
+}
+
/*
// Janky solution for now to account for links outside the .nav
@@ -310,17 +319,4 @@
}
}
-// Buttons in navbar
-// -------------------------
-.navbar .btn,
-.navbar .btn-group {
- .navbarVerticalAlign(30px); // Vertically center in navbar
-}
-.navbar .btn-group .btn,
-.navbar .input-prepend .btn,
-.navbar .input-append .btn {
- margin-top: 0; // then undo the margin here so we don't accidentally double it
-}
-
-
*/