diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components/navbar.md | 30 |
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 %} - - |
