Simplify code for 'cover' example by using utility classes. (#28986)

site/content/docs/4.3/examples/cover/index.html

@@ -3,15 +3,16 @@ layout: examples
 title: Cover Template
 extra_css:
   - "cover.css"
-body_class: "text-center"
+html_class: "h-100"
+body_class: "d-flex h-100 text-center text-white bg-dark"
 include_js: false
 ---
 
 <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
-  <header class="masthead mb-auto">
-    <div class="inner">
-      <h3 class="masthead-brand">Cover</h3>
-      <nav class="nav nav-masthead justify-content-center">
+  <header class="mb-auto">
+    <div>
+      <h3 class="float-md-left mb-0">Cover</h3>
+      <nav class="nav nav-masthead justify-content-center float-md-right">
         <a class="nav-link active" href="#">Home</a>
         <a class="nav-link" href="#">Features</a>
         <a class="nav-link" href="#">Contact</a>
@@ -19,17 +20,15 @@ include_js: false
     </div>
   </header>
 
-  <main role="main" class="inner cover">
-    <h1 class="cover-heading">Cover your page.</h1>
+  <main role="main" class="px-3">
+    <h1>Cover your page.</h1>
     <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
     <p class="lead">
-      <a href="#" class="btn btn-lg btn-secondary">Learn more</a>
+      <a href="#" class="btn btn-lg btn-secondary font-weight-bold border-white bg-white">Learn more</a>
     </p>
   </main>
 
-  <footer class="mastfoot mt-auto">
-    <div class="inner">
-      <p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
-    </div>
+  <footer class="mt-auto text-white-50">
+    <p>Cover template for <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, by <a href="https://twitter.com/mdo" class="text-white">@mdo</a>.</p>
   </footer>
 </div>