Merge branch 'v4' of github.com:twbs/derpstrap into v4

6 files changed, 327 insertions, 365 deletions

diff --git a/docs/components/button-dropdown.md b/docs/components/button-dropdown.md
index 32e03c0b7..315b35107 100644
--- a/docs/components/button-dropdown.md
+++ b/docs/components/button-dropdown.md
@@ -24,63 +24,63 @@ Turn a button into a dropdown toggle with some basic markup changes.
 <div class="bd-example">
   <div class="btn-group">
     <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
   </div><!-- /btn-group -->
   <div class="btn-group">
     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
   </div><!-- /btn-group -->
   <div class="btn-group">
     <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
   </div><!-- /btn-group -->
   <div class="btn-group">
     <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
   </div><!-- /btn-group -->
   <div class="btn-group">
     <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
   </div><!-- /btn-group -->
   <div class="btn-group">
     <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
   </div><!-- /btn-group -->
 </div>
 
@@ -90,13 +90,13 @@ Turn a button into a dropdown toggle with some basic markup changes.
   <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Action
   </button>
-  <ul class="dropdown-menu">
-    <li><a href="#">Action</a></li>
-    <li><a href="#">Another action</a></li>
-    <li><a href="#">Something else here</a></li>
-    <li role="separator" class="divider"></li>
-    <li><a href="#">Separated link</a></li>
-  </ul>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+    <div class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
+  </div>
 </div>
 {% endhighlight %}
 
@@ -110,78 +110,78 @@ Similarly, create split button dropdowns with the same markup changes, only with
     <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="sr-only">Toggle Dropdown</span>
     </button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
   </div><!-- /btn-group -->
   <div class="btn-group">
     <button type="button" class="btn btn-primary">Primary</button>
     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="sr-only">Toggle Dropdown</span>
     </button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
   </div><!-- /btn-group -->
   <div class="btn-group">
     <button type="button" class="btn btn-success">Success</button>
     <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="sr-only">Toggle Dropdown</span>
     </button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
   </div><!-- /btn-group -->
   <div class="btn-group">
     <button type="button" class="btn btn-info">Info</button>
     <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="sr-only">Toggle Dropdown</span>
     </button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
   </div><!-- /btn-group -->
   <div class="btn-group">
     <button type="button" class="btn btn-warning">Warning</button>
     <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="sr-only">Toggle Dropdown</span>
     </button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
   </div><!-- /btn-group -->
   <div class="btn-group">
     <button type="button" class="btn btn-danger">Danger</button>
     <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="sr-only">Toggle Dropdown</span>
     </button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
   </div><!-- /btn-group -->
 </div>
 
@@ -192,13 +192,13 @@ Similarly, create split button dropdowns with the same markup changes, only with
   <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <span class="sr-only">Toggle Dropdown</span>
   </button>
-  <ul class="dropdown-menu">
-    <li><a href="#">Action</a></li>
-    <li><a href="#">Another action</a></li>
-    <li><a href="#">Something else here</a></li>
-    <li role="separator" class="divider"></li>
-    <li><a href="#">Separated link</a></li>
-  </ul>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+    <div class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
+  </div>
 </div>
 {% endhighlight %}
 
@@ -212,13 +212,13 @@ Button dropdowns work with buttons of all sizes.
       <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Large button
       </button>
-      <ul class="dropdown-menu">
-        <li><a href="#">Action</a></li>
-        <li><a href="#">Another action</a></li>
-        <li><a href="#">Something else here</a></li>
-        <li role="separator" class="divider"></li>
-        <li><a href="#">Separated link</a></li>
-      </ul>
+      <div class="dropdown-menu">
+        <a class="dropdown-item" href="#">Action</a>
+        <a class="dropdown-item" href="#">Another action</a>
+        <a class="dropdown-item" href="#">Something else here</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="#">Separated link</a>
+      </div>
     </div><!-- /btn-group -->
   </div><!-- /btn-toolbar -->
   <div class="btn-toolbar" role="toolbar">
@@ -226,13 +226,13 @@ Button dropdowns work with buttons of all sizes.
       <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Small button
       </button>
-      <ul class="dropdown-menu">
-        <li><a href="#">Action</a></li>
-        <li><a href="#">Another action</a></li>
-        <li><a href="#">Something else here</a></li>
-        <li role="separator" class="divider"></li>
-        <li><a href="#">Separated link</a></li>
-      </ul>
+      <div class="dropdown-menu">
+        <a class="dropdown-item" href="#">Action</a>
+        <a class="dropdown-item" href="#">Another action</a>
+        <a class="dropdown-item" href="#">Something else here</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="#">Separated link</a>
+      </div>
     </div><!-- /btn-group -->
   </div><!-- /btn-toolbar -->
   <div class="btn-toolbar" role="toolbar">
@@ -240,13 +240,13 @@ Button dropdowns work with buttons of all sizes.
       <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Extra small button
       </button>
-      <ul class="dropdown-menu">
-        <li><a href="#">Action</a></li>
-        <li><a href="#">Another action</a></li>
-        <li><a href="#">Something else here</a></li>
-        <li role="separator" class="divider"></li>
-        <li><a href="#">Separated link</a></li>
-      </ul>
+      <div class="dropdown-menu">
+        <a class="dropdown-item" href="#">Action</a>
+        <a class="dropdown-item" href="#">Another action</a>
+        <a class="dropdown-item" href="#">Something else here</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="#">Separated link</a>
+      </div>
     </div><!-- /btn-group -->
   </div><!-- /btn-toolbar -->
 </div><!-- /example -->
@@ -257,9 +257,9 @@ Button dropdowns work with buttons of all sizes.
   <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Large button
   </button>
-  <ul class="dropdown-menu">
+  <div class="dropdown-menu">
     ...
-  </ul>
+  </div>
 </div>
 
 <!-- Small button group -->
@@ -267,9 +267,9 @@ Button dropdowns work with buttons of all sizes.
   <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Small button
   </button>
-  <ul class="dropdown-menu">
+  <div class="dropdown-menu">
     ...
-  </ul>
+  </div>
 </div>
 
 <!-- Extra small button group -->
@@ -277,9 +277,9 @@ Button dropdowns work with buttons of all sizes.
   <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Extra small button
   </button>
-  <ul class="dropdown-menu">
+  <div class="dropdown-menu">
     ...
-  </ul>
+  </div>
 </div>
 {% endhighlight %}
 
@@ -294,26 +294,26 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
       <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="sr-only">Toggle Dropdown</span>
       </button>
-      <ul class="dropdown-menu">
-        <li><a href="#">Action</a></li>
-        <li><a href="#">Another action</a></li>
-        <li><a href="#">Something else here</a></li>
-        <li role="separator" class="divider"></li>
-        <li><a href="#">Separated link</a></li>
-      </ul>
+      <div class="dropdown-menu">
+        <a class="dropdown-item" href="#">Action</a>
+        <a class="dropdown-item" href="#">Another action</a>
+        <a class="dropdown-item" href="#">Something else here</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="#">Separated link</a>
+      </div>
     </div><!-- /btn-group -->
     <div class="btn-group dropup">
       <button type="button" class="btn btn-primary">Right dropup</button>
       <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="sr-only">Toggle Dropdown</span>
       </button>
-      <ul class="dropdown-menu dropdown-menu-right">
-        <li><a href="#">Action</a></li>
-        <li><a href="#">Another action</a></li>
-        <li><a href="#">Something else here</a></li>
-        <li role="separator" class="divider"></li>
-        <li><a href="#">Separated link</a></li>
-      </ul>
+      <div class="dropdown-menu dropdown-menu-right">
+        <a class="dropdown-item" href="#">Action</a>
+        <a class="dropdown-item" href="#">Another action</a>
+        <a class="dropdown-item" href="#">Something else here</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="#">Separated link</a>
+      </div>
     </div><!-- /btn-group -->
   </div>
 </div>
@@ -324,8 +324,8 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
   <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <span class="sr-only">Toggle Dropdown</span>
   </button>
-  <ul class="dropdown-menu">
+  <div class="dropdown-menu">
     <!-- Dropdown menu links -->
-  </ul>
+  </div>
 </div>
 {% endhighlight %}
diff --git a/docs/components/buttons.md b/docs/components/buttons.md
index 2fd8de07d..708a4870c 100644
--- a/docs/components/buttons.md
+++ b/docs/components/buttons.md
@@ -2,6 +2,7 @@
 layout: docs
 title: Buttons
 group: components
+redirect_from: "/components/"
 ---
 
 Use Bootstrap's custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md
index 091776696..037e0d1cf 100644
--- a/docs/components/dropdowns.md
+++ b/docs/components/dropdowns.md
@@ -20,20 +20,33 @@ Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another
   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Dropdown
   </button>
-  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
-    <li>
-      <a href="#">Action</a>
-    </li>
-    <li>
-      <a href="#">Another action</a>
-    </li>
-    <li>
-      <a href="#">Something else here</a>
-    </li>
-  </ul>
+  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+  </div>
 </div>
 {% endexample %}
 
+### Button elements
+
+You can optionally use `<button>` elements in your dropdowns instead of `<a>`s.
+
+{% example html %}
+<div class="dropdown open">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    Dropdown
+  </button>
+  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
+    <button class="dropdown-item" type="button">Action</button>
+    <button class="dropdown-item" type="button">Another action</button>
+    <button class="dropdown-item" type="button">Something else here</button>
+  </div>
+</div>
+{% endexample %}
+
+
+
 ## Alignment
 
 By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
@@ -43,9 +56,9 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
 {% endcallout %}
 
 {% highlight html %}
-<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
+<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
   ...
-</ul>
+</div>
 {% endhighlight %}
 
 ## Menu headers
@@ -53,15 +66,11 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
 Add a header to label sections of actions in any dropdown menu.
 
 {% example html %}
-<ul class="dropdown-menu">
-  <li class="dropdown-header">Dropdown header</li>
-  <li>
-    <a href="#">Action</a>
-  </li>
-  <li>
-    <a href="#">Another action</a>
-  </li>
-</ul>
+<div class="dropdown-menu">
+  <h6 class="dropdown-header">Dropdown header</h6>
+  <a class="dropdown-item" href="#">Action</a>
+  <a class="dropdown-item" href="#">Another action</a>
+</div>
 {% endexample %}
 
 ## Menu dividers
@@ -69,39 +78,25 @@ Add a header to label sections of actions in any dropdown menu.
 Separate groups of related menu items with a divider.
 
 {% example html %}
-<ul class="dropdown-menu">
-  <li>
-    <a href="#">Action</a>
-  </li>
-  <li>
-    <a href="#">Another action</a>
-  </li>
-  <li>
-    <a href="#">Something else here</a>
-  </li>
-  <li class="dropdown-divider"></li>
-  <li>
-    <a href="#">Separated link</a>
-  </li>
-</ul>
+<div class="dropdown-menu">
+  <a class="dropdown-item" href="#">Action</a>
+  <a class="dropdown-item" href="#">Another action</a>
+  <a class="dropdown-item" href="#">Something else here</a>
+  <div class="dropdown-divider"></div>
+  <a class="dropdown-item" href="#">Separated link</a>
+</div>
 {% endexample %}
 
 ## Disabled menu items
 
-Add `.disabled` to a `<li>` in the dropdown to disable the link.
+Add `.disabled` to items in the dropdown to **style them as disabled**.
 
 {% example html %}
-<ul class="dropdown-menu">
-  <li>
-    <a href="#">Regular link</a>
-  </li>
-  <li class="disabled">
-    <a href="#">Disabled link</a>
-  </li>
-  <li>
-    <a href="#">Another link</a>
-  </li>
-</ul>
+<div class="dropdown-menu">
+  <a class="dropdown-item" href="#">Regular link</a>
+  <a class="dropdown-item disabled" href="#">Disabled link</a>
+  <a class="dropdown-item" href="#">Another link</a>
+</div>
 {% endexample %}
 
 ## Usage
@@ -121,9 +116,9 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
   <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Dropdown trigger
   </button>
-  <ul class="dropdown-menu" aria-labelledby="dLabel">
+  <div class="dropdown-menu" aria-labelledby="dLabel">
     ...
-  </ul>
+  </div>
 </div>
 {% endhighlight %}
 
@@ -135,9 +130,9 @@ To keep URLs intact with link buttons, use the `data-target` attribute instead o
     Dropdown trigger
   </a>
 
-  <ul class="dropdown-menu" aria-labelledby="dLabel">
+  <div class="dropdown-menu" aria-labelledby="dLabel">
     ...
-  </ul>
+  </div>
 </div>
 {% endhighlight %}
 
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index b2b5d1109..7a8f1d06f 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -24,9 +24,9 @@ List groups are a flexible and powerful component for displaying not only simple
 </ul>
 {% endexample %}
 
-## Badges
+## Labels
 
-Add the badges component to any list group item and it will automatically be positioned on the right.
+Add labels to any list group item to show unread counts, activity, etc.
 
 {% example html %}
 <ul class="list-group">
diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index dd3a620f1..2c98c812a 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -4,41 +4,38 @@ title: Navbar
 group: components
 ---
 
-The navbar is a simple wrapper for positioning branding, navigation, and other elements. It's easily extensible and with the help of our collapse plugin it can easily integrate offscreen content.
+The navbar is a simple wrapper for positioning branding, navigation, and other elements into a concise navigation header. It's easily extensible and, with the help of our collapse plugin, it can easily integrate offscreen content.
 
 ## Contents
 
 * Will be replaced with the ToC, excluding the "Contents" header
 {:toc}
 
-### Basics
+## Basics
 
 Here's what you need to know before getting started with the navbar:
 
-- Navbars require a wrapping `.navbar` and either a color scheme class or custom styles.
+- Navbars require a wrapping `.navbar` and a color scheme class (either `.navbar-default` or `.navbar-inverse`).
 - When using multiple components in a navbar, some [alignment classes](#alignment) are required.
 - Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
+- Use `.pull-left` and `.pull-right` to quickly align sub-components.
 - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
 
-### Branding
+## Supported content
 
-Name your company, product, or project with `.navbar-brand`.
+Navbars come with built-in support for a handful of sub-components. Mix and match from the following as you need:
 
-{% example html %}
-<nav class="navbar navbar-default">
-  <h3 class="navbar-brand">
-    <a href="#">Navbar</a>
-  </h3>
-</nav>
-{% endexample %}
-
-### Navigation
+- `.navbar-brand` for your company, product, or project name
+- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
+- `.navbar-form` for vertically centering default-sized inputs and buttons.
+- `.navbar-toggler` for use with our collapse plugin and other navigation toggling behaviors.
 
-Use `.nav-pills` within a navbar for basic navigation.
+Here's an example of all the sub-components included in a default, light navbar:
 
 {% example html %}
-<nav class="navbar navbar-default">
-  <ul class="nav nav-pills">
+<nav class="navbar navbar-light bg-faded">
+  <a class="navbar-brand" href="#">Navbar</a>
+  <ul class="nav navbar-nav">
     <li class="nav-item active">
       <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
     </li>
@@ -52,122 +49,23 @@ Use `.nav-pills` within a navbar for basic navigation.
       <a class="nav-link" href="#">About</a>
     </li>
   </ul>
-</nav>
-{% endexample %}
-
-### Inline forms
-
-Add an `.inline-form` within the navbar with nearly any combination of form controls and buttons.
-
-{% example html %}
-<nav class="navbar navbar-default">
-  <form class="form-inline">
+  <form class="form-inline navbar-form pull-right">
     <input class="form-control" type="text" placeholder="Search">
-    <button class="btn btn-primary" type="submit">Search</button>
+    <button class="btn btn-success-outline" type="submit">Search</button>
   </form>
 </nav>
 {% endexample %}
 
-### Containers
-
-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 %}
-<div class="container">
-  <nav class="navbar navbar-default">
-    <h3 class="navbar-brand">
-      <a href="#">Navbar</a>
-    </h3>
-  </nav>
-</div>
-{% endexample %}
-
-{% example html %}
-<nav class="navbar navbar-default">
-  <div class="container">
-    <h3 class="navbar-brand">
-      <a href="#">Navbar</a>
-    </h3>
-  </div>
-</nav>
-{% endexample %}
+## Color schemes
 
-### Alignment
+Theming the navbar has never been easier thanks to the combination of a simple link color modifier class and `background-color` utilities. Put another way, you specify light or dark and apply a background color.
 
-Use `.pull-left` or `.pull-right` to align multiple elements within the navbar.
-
-{% example html %}
-<nav class="navbar navbar-default">
-  <h3 class="navbar-brand pull-left">
-    <a href="#">Navbar</a>
-  </h3>
-  <ul class="nav nav-pills pull-left">
-    <li class="nav-item active">
-      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#">Features</a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#">Pricing</a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#">About</a>
-    </li>
-  </ul>
-  <ul class="nav nav-pills pull-right">
-    <li class="nav-item">
-      <a class="nav-link" href="#">Help</a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#">Sign out</a>
-    </li>
-  </ul>
-</nav>
-{% endexample %}
-
-### Inverse color scheme
-
-Replace `.navbar-default` with `.navbar-inverse` for a darker background color and white text.
-
-{% example html %}
-<nav class="navbar navbar-inverse">
-  <h3 class="navbar-brand pull-left">
-    <a href="#">Navbar</a>
-  </h3>
-  <ul class="nav nav-pills pull-left">
-    <li class="nav-item active">
-      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#">Features</a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#">Pricing</a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#">About</a>
-    </li>
-  </ul>
-  <form class="form-inline pull-right">
-    <input class="form-control" type="text" placeholder="Search">
-    <button class="btn btn-primary" type="submit">Search</button>
-  </form>
-</nav>
-{% endexample %}
-
-### 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.
-
-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.
+Here are some examples to show what we mean.
 
 <div class="bd-example">
-  <nav class="navbar navbar-default navbar-sm">
-    <h3 class="navbar-brand pull-left">
-      <a href="#">Navbar</a>
-    </h3>
-    <ul class="nav navbar-nav pull-left">
+  <nav class="navbar navbar-dark bg-inverse">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <ul class="nav navbar-nav">
       <li class="nav-item active">
         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
       </li>
@@ -181,17 +79,14 @@ When moving from a regular navbar to a small one, be sure to update your inputs
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline pull-right">
-      <input class="form-control form-control-sm" type="text" placeholder="Search">
-      <button class="btn btn-sm btn-primary" type="submit">Search</button>
+    <form class="form-inline navbar-form pull-right">
+      <input class="form-control" type="text" placeholder="Search">
+      <button class="btn btn-info-outline" type="submit">Search</button>
     </form>
   </nav>
-
-  <nav class="navbar navbar-inverse navbar-sm">
-    <h3 class="navbar-brand pull-left">
-      <a href="#">Navbar</a>
-    </h3>
-    <ul class="nav navbar-nav pull-left">
+  <nav class="navbar navbar-dark bg-primary">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <ul class="nav navbar-nav">
       <li class="nav-item active">
         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
       </li>
@@ -205,35 +100,97 @@ When moving from a regular navbar to a small one, be sure to update your inputs
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline pull-right">
-      <input class="form-control form-control-sm" type="text" placeholder="Search">
-      <button class="btn btn-sm btn-primary" type="submit">Search</button>
+    <form class="form-inline navbar-form pull-right">
+      <input class="form-control" type="text" placeholder="Search">
+      <button class="btn btn-secondary-outline" type="submit">Search</button>
+    </form>
+  </nav>
+  <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <ul class="nav navbar-nav">
+      <li class="nav-item active">
+        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Features</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Pricing</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">About</a>
+      </li>
+    </ul>
+    <form class="form-inline navbar-form pull-right">
+      <input class="form-control" type="text" placeholder="Search">
+      <button class="btn btn-primary-outline" type="submit">Search</button>
     </form>
   </nav>
 </div>
 
 {% highlight html %}
-<nav class="navbar navbar-default navbar-sm">
-  <!-- Navbar contents -->
+<nav class="navbar navbar-dark bg-inverse">
+  <!-- Navbar content -->
+</nav>
+
+<nav class="navbar navbar-dark bg-primary">
+  <!-- Navbar content -->
 </nav>
 
-<nav class="navbar navbar-inverse navbar-sm">
-  <!-- Navbar contents -->
+<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
+  <!-- Navbar content -->
 </nav>
 {% endhighlight %}
 
-### Collapsible content
+## Containers
+
+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 %}
+<div class="container">
+  <nav class="navbar navbar-light bg-faded">
+    <a class="navbar-brand" href="#">Navbar</a>
+  </nav>
+</div>
+{% endexample %}
+
+{% example html %}
+<nav class="navbar navbar-light bg-faded">
+  <div class="container">
+    <a class="navbar-brand" href="#">Navbar</a>
+  </div>
+</nav>
+{% endexample %}
+
+## Placement
+
+Navbars can be statically placed (their default behavior), or fixed to the top or bottom of the viewport.
+
+{% example html %}
+<nav class="navbar navbar-fixed-top navbar-light bg-faded">
+  <a class="navbar-brand" href="#">Fixed top</a>
+</nav>
+{% endexample %}
+
+{% example html %}
+<nav class="navbar navbar-fixed-bottom navbar-light bg-faded">
+  <a class="navbar-brand" href="#">Fixed bottom</a>
+</nav>
+{% endexample %}
+
+
+## Collapsible content
 
 Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.
 
 {% example html %}
 <div class="collapse" id="exCollapsingNavbar">
-  <div class="inverse p-a">
+  <div class="bg-inverse p-a">
     <h4>Collapsed content</h4>
-    <p>Toggleable via the navbar brand.</p>
+    <span class="text-muted">Toggleable via the navbar brand.</span>
   </div>
 </div>
-<nav class="navbar navbar-default">
+<nav class="navbar navbar-light bg-faded">
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
     &#9776;
   </button>
@@ -243,13 +200,26 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
 For more complex navbar patterns, like those used in Bootstrap v3, use the `.navbar-toggleable-*` classes in conjunction with the `.navbar-toggler`. These classes override our responsive utilities to show navigation only when content is meant to be shown.
 
 {% example html %}
-<nav class="navbar navbar-default">
+<nav class="navbar navbar-light bg-faded">
   <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
     &#9776;
   </button>
   <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
-    <h4>Collapsed on xs devices</h4>
-    <p>Toggleable via the navbar brand.</p>
+    <a class="navbar-brand" href="#">Responsive navbar</a>
+    <ul class="nav navbar-nav">
+      <li class="nav-item active">
+        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Features</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Pricing</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">About</a>
+      </li>
+    </ul>
   </div>
 </nav>
 {% endexample %}
diff --git a/docs/components/navs.md b/docs/components/navs.md
index c951bb1ba..644cd7bf0 100644
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@@ -123,13 +123,13 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
   </li>
   <li class="nav-item">
     <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
   </li>
   <li class="nav-item">
     <a href="#" class="nav-link">Another link</a>
@@ -149,13 +149,13 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
   </li>
   <li class="nav-item">
     <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
   </li>
   <li class="nav-item">
     <a href="#" class="nav-link">Another link</a>
@@ -182,14 +182,10 @@ Use the tab JavaScript plugin—include it individually or through the compiled
       <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
         Dropdown
       </a>
-      <ul class="dropdown-menu">
-        <li>
-          <a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a>
-        </li>
-        <li>
-          <a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
-        </li>
-      </ul>
+      <div class="dropdown-menu">
+        <a class="dropdown-item" href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a>
+        <a class="dropdown-item" href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
+      </div>
     </li>
   </ul>
   <div id="myTabContent" class="tab-content">