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

site/content/docs/4.3/examples/cover/cover.css

@@ -2,12 +2,6 @@
  * Globals
  */
 
-/* Links */
-a,
-a:focus,
-a:hover {
-  color: #fff;
-}
 
 /* Custom default button */
 .btn-secondary,
@@ -15,8 +9,6 @@ a:hover {
 .btn-secondary:focus {
   color: #333;
   text-shadow: none; /* Prevent inheritance from `body` */
-  background-color: #fff;
-  border: .05rem solid #fff;
 }
 
 
@@ -24,15 +16,7 @@ a:hover {
  * Base structure
  */
 
-html,
 body {
-  height: 100%;
-  background-color: #333;
-}
-
-body {
-  display: flex;
-  color: #fff;
   text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
   box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
 }
@@ -45,13 +29,6 @@ body {
 /*
  * Header
  */
-.masthead {
-  margin-bottom: 2rem;
-}
-
-.masthead-brand {
-  margin-bottom: 0;
-}
 
 .nav-masthead .nav-link {
   padding: .25rem 0;
@@ -74,32 +51,3 @@ body {
   color: #fff;
   border-bottom-color: #fff;
 }
-
-@media (min-width: 48em) {
-  .masthead-brand {
-    float: left;
-  }
-  .nav-masthead {
-    float: right;
-  }
-}
-
-
-/*
- * Cover
- */
-.cover {
-  padding: 0 1.5rem;
-}
-.cover .btn-lg {
-  padding: .75rem 1.25rem;
-  font-weight: 700;
-}
-
-
-/*
- * Footer
- */
-.mastfoot {
-  color: rgba(255, 255, 255, .5);
-}

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">
+  <header class="mb-auto">
-    <div class="inner">
+    <div>
-      <h3 class="masthead-brand">Cover</h3>
+      <h3 class="float-md-left mb-0">Cover</h3>
-      <nav class="nav nav-masthead justify-content-center">
+      <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">
+  <main role="main" class="px-3">
-    <h1 class="cover-heading">Cover your page.</h1>
+    <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">
+  <footer class="mt-auto text-white-50">
-    <div class="inner">
+    <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>
-      <p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
-    </div>
   </footer>
 </div>