More navbar example content with forms

1 files changed, 39 insertions, 0 deletions

diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 0753b8338..ee028d2c6 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -28,6 +28,8 @@ Navbars come with built-in support for a handful of sub-components. Mix and matc
 - `.navbar-brand` for your company, product, or project name
 - `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
 - `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsible-content) behaviors.
+- Inline forms with `.float-` utilities for form controls and components.
+- `.navbar-text` for adding vertically centered strings of text.
 
 Here's an example of all the sub-components included in a default, non-responsive light themed navbar. [See the responsive examples](#collapsible-content) for collapsing nav support.
 
@@ -163,6 +165,43 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap
 </nav>
 {% endexample %}
 
+### Forms
+
+Place various form controls and components within a navbar with `.form-inline`. Align them with `.float-` utilities as needed.
+
+{% example html %}
+<nav class="navbar navbar-light bg-faded">
+  <form class="form-inline float-xs-left">
+    <input class="form-control" type="text" placeholder="Search">
+    <button class="btn btn-outline-success" type="submit">Search</button>
+  </form>
+</nav>
+{% endexample %}
+
+Input groups work, too:
+
+{% example html %}
+<nav class="navbar navbar-light bg-faded">
+  <form class="form-inline float-xs-left">
+    <div class="input-group">
+      <span class="input-group-addon" id="basic-addon1">@</span>
+      <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
+    </div>
+  </form>
+</nav>
+{% endexample %}
+
+Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilites can be used to align different sized elements.
+
+{% example html %}
+<nav class="navbar navbar-light bg-faded">
+  <form class="form-inline float-xs-left">
+    <button class="btn btn-outline-success" type="button">Main button</button>
+    <button class="btn btn-sm align-middle btn-outline-secondary" type="button">Smaller button</button>
+  </form>
+</nav>
+{% endexample %}
+
 ### Text
 
 Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.