diff --git a/docs/examples/album/index.html b/docs/examples/album/index.html
index 900d8146d..bfc9d0223 100644
--- a/docs/examples/album/index.html
+++ b/docs/examples/album/index.html
@@ -35,7 +35,7 @@
         </div>
       </div>
     </div>
-    <div class="navbar navbar-inverse navbar-static-top">
+    <div class="navbar navbar-static-top navbar-dark bg-inverse">
       <div class="container-fluid">
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
           &#9776;
diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html
index d34786540..767e74d38 100644
--- a/docs/examples/carousel/index.html
+++ b/docs/examples/carousel/index.html
@@ -19,9 +19,9 @@
   </head>
   <body>
 
-    <nav class="navbar navbar-default navbar-static-top">
+    <nav class="navbar navbar-static-top navbar-light bg-faded">
       <a href="#" class="navbar-brand">Carousel</a>
-      <ul class="nav nav-pills">
+      <ul class="nav navbar-nav">
         <li class="nav-item active">
           <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
         </li>
diff --git a/docs/examples/jumbotron/index.html b/docs/examples/jumbotron/index.html
index 674c5c2b5..22d613cef 100644
--- a/docs/examples/jumbotron/index.html
+++ b/docs/examples/jumbotron/index.html
@@ -20,9 +20,9 @@
 
   <body>
 
-    <nav class="navbar navbar-inverse navbar-static-top">
+    <nav class="navbar navbar-static-top navbar-dark bg-inverse">
       <a class="navbar-brand" href="#">Project name</a>
-      <ul class="nav nav-pills">
+      <ul class="nav navbar-nav">
         <li class="nav-item active">
           <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
         </li>
@@ -38,7 +38,7 @@
     <!-- Main jumbotron for a primary marketing message or call to action -->
     <div class="jumbotron">
       <div class="container">
-        <h1>Hello, world!</h1>
+        <h1 class="display-3">Hello, world!</h1>
         <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
         <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
       </div>
diff --git a/docs/examples/narrow-jumbotron/index.html b/docs/examples/narrow-jumbotron/index.html
index 86c732ba7..1286cf3a3 100644
--- a/docs/examples/narrow-jumbotron/index.html
+++ b/docs/examples/narrow-jumbotron/index.html
@@ -39,7 +39,7 @@
       </div>
 
       <div class="jumbotron">
-        <h1>Jumbotron heading</h1>
+        <h1 class="display-3">Jumbotron heading</h1>
         <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
         <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
       </div>
diff --git a/docs/examples/starter-template/index.html b/docs/examples/starter-template/index.html
index ca82debb2..d93be2ce9 100644
--- a/docs/examples/starter-template/index.html
+++ b/docs/examples/starter-template/index.html
@@ -20,9 +20,9 @@
 
   <body>
 
-    <nav class="navbar navbar-inverse navbar-fixed-top">
+    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
       <a class="navbar-brand" href="#">Project name</a>
-      <ul class="nav nav-pills">
+      <ul class="nav navbar-nav">
         <li class="nav-item active">
           <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
         </li>
