diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html
index 11c85b155d..9b9155f205 100644
--- a/docs/examples/dashboard/index.html
+++ b/docs/examples/dashboard/index.html
@@ -19,15 +19,16 @@
   </head>
 
   <body>
-    <nav class="navbar navbar-fixed-top navbar-inverse bg-inverse">
-      <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+    <nav class="navbar navbar-inverse navbar-fixed-top bg-inverse navbar-toggleable-md">
+      <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
-      <div class="collapse navbar-toggleable-sm" id="navbar">
-        <a class="navbar-brand" href="#">Project name</a>
-        <ul class="nav navbar-nav float-sm-right">
+      <a class="navbar-brand" href="#">Dashboard</a>
+
+      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+        <ul class="nav navbar-nav">
           <li class="nav-item active">
-            <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
+            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">Settings</a>
@@ -39,8 +40,9 @@
             <a class="nav-link" href="#">Help</a>
           </li>
         </ul>
-        <form class="form-inline float-sm-right mr-3">
-          <input class="form-control" type="text" placeholder="Search">
+        <form class="form-inline mt-2 mt-md-0">
+          <input class="form-control mr-md-2" type="text" placeholder="Search">
+          <button class="btn btn-outline-success my-2 my-md-0" type="submit">Search</button>
         </form>
       </div>
     </nav>
diff --git a/docs/examples/navbars/index.html b/docs/examples/navbars/index.html
index 602b10bb2d..e5c4f2820f 100644
--- a/docs/examples/navbars/index.html
+++ b/docs/examples/navbars/index.html
@@ -20,13 +20,13 @@
 
   <body>
 
-    <nav class="navbar navbar-inverse bg-inverse">
+    <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md">
       <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <a class="navbar-brand" href="#">Navbar</a>
 
-      <div class="collapse navbar-toggleable-md" id="navbarsExampleDefault">
+      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
         <ul class="nav navbar-nav">
           <li class="nav-item active">
             <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
@@ -53,14 +53,14 @@
       </div>
     </nav>
 
-    <nav class="navbar navbar-inverse bg-inverse">
+    <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md">
       <div class="container">
         <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
         <a class="navbar-brand" href="#">Container</a>
 
-        <div class="collapse navbar-toggleable-md" id="navbarsExampleContainer">
+        <div class="collapse navbar-collapse" id="navbarsExampleContainer">
           <ul class="nav navbar-nav">
             <li class="nav-item active">
               <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
@@ -88,12 +88,12 @@
       </div>
     </nav>
 
-    <nav class="navbar navbar-inverse bg-inverse">
-      <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleCenteredNav" aria-controls="navbarsExampleCenteredNav" aria-expanded="false" aria-label="Toggle navigation">
+    <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md">
+      <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleCenteredNav" aria-controls="navbarsExampleCenteredNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
 
-      <div class="collapse navbar-toggleable-md" id="navbarsExampleCenteredNav">
+      <div class="collapse navbar-collapse" id="navbarsExampleCenteredNav">
         <ul class="nav navbar-nav text-md-center">
           <li class="nav-item active">
             <a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a>
@@ -117,13 +117,13 @@
     </nav>
 
     <div class="container">
-      <nav class="navbar navbar-light bg-faded rounded">
+      <nav class="navbar navbar-light bg-faded rounded navbar-toggleable-md">
         <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#containerNavbar" aria-controls="containerNavbar" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
         <a class="navbar-brand" href="#">Navbar</a>
 
-        <div class="collapse navbar-toggleable-md" id="containerNavbar">
+        <div class="collapse navbar-collapse" id="containerNavbar">
           <ul class="nav navbar-nav">
             <li class="nav-item active">
               <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
@@ -150,12 +150,12 @@
         </div>
       </nav>
 
-      <nav class="navbar navbar-light bg-faded rounded">
-        <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#containerNavbarCenter" aria-controls="containerNavbarCenter" aria-expanded="false" aria-label="Toggle navigation">
+      <nav class="navbar navbar-light bg-faded rounded navbar-toggleable-md">
+        <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#containerNavbarCenter" aria-controls="containerNavbarCenter" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
 
-        <div class="collapse navbar-toggleable-md" id="containerNavbarCenter">
+        <div class="collapse navbar-collapse" id="containerNavbarCenter">
           <ul class="nav navbar-nav text-md-center">
             <li class="nav-item active">
               <a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a>
