tweak footer styles

docs/_includes/footer.html

 <footer class="bd-footer" role="contentinfo">
   <div class="bd-container">
     <ul class="bd-footer-links text-muted">
-      <li>Currently v{{ site.current_version }}</li>
       <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>
       <li><a href="../about/">About</a></li>
     </ul>
     <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>. Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
-    <p>Code licensed <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
+    <p>Currently v{{ site.current_version }}. Code licensed <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
   </div>
 </footer>
 

docs/assets/scss/_footer.scss

@@ -6,24 +6,28 @@
   padding-top: 2rem;
   margin-top: 2rem;
   font-size: 85%;
-  color: #777;
-  border-top: 1px solid #eee;
+  color: $bd-graphite-light;
+  text-align: center;
+  background-color: $bd-graphite;
+
+  a {
+    color: #fff;
+  }
+
+  @include media-breakpoint-up(sm) {
+    text-align: left;
+  }
 }
+
 .bd-footer-links {
   padding-left: 0;
-  margin-top: 20px;
-  color: #999;
-}
-.bd-footer-links li {
-  display: inline;
-  padding: 0 2px;
-}
-.bd-footer-links li:first-child {
-  padding-left: 0;
-}
+  margin-bottom: 1rem;
+
+  li {
+    display: inline-block;
 
-@media (min-width: 768px) {
-  .bd-footer p {
-    margin-bottom: 0;
+    + li {
+      margin-left: 1rem;
+    }
   }
 }

docs/assets/scss/docs.scss

@@ -26,12 +26,14 @@
 @import "../../../scss/mixins";
 
 // Local docs variables
-$bd-purple:       #563d7c;
-$bd-purple-light: #cdbfe3;
-$bd-yellow:       #ffe484;
-$bd-danger:       #d9534f;
-$bd-warning:      #f0ad4e;
-$bd-info:         #5bc0de;
+$bd-purple:         #563d7c;
+$bd-purple-light:   #cdbfe3;
+$bd-graphite:       #2a2730;
+$bd-graphite-light: #99979c;
+$bd-yellow:         #ffe484;
+$bd-danger:         #d9534f;
+$bd-warning:        #f0ad4e;
+$bd-info:           #5bc0de;
 
 // Load docs components
 @import "layout";