footer overhaul again

docs/_includes/footer.html

-<footer class="bd-footer" role="contentinfo">
-  <div class="bd-container">
-    <ul class="bd-footer-links text-muted">
+<footer class="bd-footer text-muted" role="contentinfo">
+  <div class="container">
+    <ul class="bd-footer-links">
       <li><a href="{{ site.repo }}">GitHub</a></li>
       <li><a href="https://twitter.com/getbootstrap">Twitter</a></li>
       <li><a href="../getting-started/#examples">Examples</a></li>

docs/assets/css/docs.min.css

@@ -395,14 +395,18 @@
     border-radius: .25rem; } }
 
 .bd-footer {
-  padding-top: 2rem;
-  margin-top: 2rem;
+  padding: 4rem 0;
+  margin-top: 4rem;
   font-size: 85%;
-  color: #8e869d;
-  text-align: center;
-  background-color: #2a2730; }
+  background-color: #f7f7f7;
+  text-align: center; }
   .bd-footer a {
-    color: #fff; }
+    font-weight: 500;
+    color: #55595c; }
+    .bd-footer a:hover {
+      color: #0275d8; }
+  .bd-footer p {
+    margin-bottom: 0; }
   @media (min-width: 34em) {
     .bd-footer {
       text-align: left; } }

docs/assets/scss/_footer.scss

@@ -3,15 +3,23 @@
 //
 
 .bd-footer {
-  padding-top: 2rem;
-  margin-top: 2rem;
+  padding: 4rem 0;
+  margin-top: 4rem;
   font-size: 85%;
-  color: $bd-graphite-light;
+  background-color: #f7f7f7;
   text-align: center;
-  background-color: $bd-graphite;
 
   a {
-    color: #fff;
+    font-weight: 500;
+    color: $gray;
+
+    &:hover {
+      color: $link-color;
+    }
+  }
+
+  p {
+    margin-bottom: 0;
   }
 
   @include media-breakpoint-up(sm) {