diff -u b/core/themes/bartik/css/components/footer-columns.css b/core/themes/bartik/css/components/footer-columns.css
--- b/core/themes/bartik/css/components/footer-columns.css
+++ b/core/themes/bartik/css/components/footer-columns.css
@@ -2,12 +2,12 @@
  * @file
  * Visual styles for Bartik's footer columns.
  */
-.footer-columns .block-menu {
+.site-footer__upper .block-menu {
   margin: 0;
   padding: 0;
   border: none;
 }
-.footer-columns h2 {
+.site-footer__upper h2 {
   border-bottom: 1px solid #555;
   border-color: rgba(255, 255, 255, 0.15);
   font-size: 1em;
@@ -15,26 +15,26 @@
   padding-bottom: 3px;
   text-transform: uppercase;
 }
-.footer-columns .content {
+.site-footer__upper .content {
   margin-top: 0;
 }
-.footer-columns p {
+.site-footer__upper p {
   margin-top: 1em;
 }
-.footer-columns .content ul {
+.site-footer__upper .content ul {
   list-style: none;
   padding-left: 0; /* LTR */
   margin-left: 0;
 }
-[dir="rtl"] .footer-columns .content ul {
+[dir="rtl"] .site-footer__upper .content ul {
   padding-right: 0;
 }
-.footer-columns .content li {
+.site-footer__upper .content li {
   list-style: none;
   margin: 0;
   padding: 0;
 }
-.footer-columns .content li a {
+.site-footer__upper .content li a {
   display: block;
   border-bottom: 1px solid #555;
   border-color: rgba(255, 255, 255, 0.15);
@@ -42,11 +42,11 @@
   padding: 0.8em 2px 0.8em 20px; /* LTR */
   text-indent: -15px;
 }
-[dir="rtl"] .footer-columns .content li a {
+[dir="rtl"] .site-footer__upper .content li a {
   padding: 0.8em 20px 0.8em 2px;
 }
-.footer-columns .content li a:hover,
-.footer-columns .content li a:focus {
+.site-footer__upper .content li a:hover,
+.site-footer__upper .content li a:focus {
   background-color: #1f1f21;
   background-color: rgba(255, 255, 255, 0.05);
   text-decoration: none;
diff -u b/core/themes/bartik/css/components/footer-menu.css b/core/themes/bartik/css/components/footer-menu.css
--- b/core/themes/bartik/css/components/footer-menu.css
+++ b/core/themes/bartik/css/components/footer-menu.css
@@ -2,37 +2,37 @@
  * @file
  * Visual styles for Bartik's footer menu.
  */
-.footer-bottom .menu,
-.footer-bottom .menu li {
+.site-footer__bottom .menu,
+.site-footer__bottom .menu li {
   list-style: none;
   margin: 0;
   padding: 0;
 }
-.footer-bottom .menu li a {
+.site-footer__bottom .menu li a {
   float: left; /* LTR */
   padding: 0 12px;
   display: block;
   border-right: 1px solid #555; /* LTR */
   border-color: rgba(255, 255, 255, 0.15);
 }
-[dir="rtl"] .footer-bottom .menu li a {
+[dir="rtl"] .site-footer__bottom .menu li a {
   float: right;
   border-left: 1px solid #555;
   border-color: rgba(255, 255, 255, 0.15);
   border-right: none;
 }
-.footer-bottom .menu li:first-child a {
+.site-footer__bottom .menu li:first-child a {
   padding-left: 0; /* LTR */
 }
-[dir="rtl"] .footer-bottom .menu li:first-child a {
+[dir="rtl"] .site-footer__bottom .menu li:first-child a {
   padding-right: 0;
   padding-left: 12px;
 }
-.footer-bottom .menu li:last-child a {
+.site-footer__bottom .menu li:last-child a {
   padding-right: 0; /* LTR */
   border-right: none; /* LTR */
 }
-[dir="rtl"] .footer-bottom .menu li:last-child a {
+[dir="rtl"] .site-footer__bottom .menu li:last-child a {
   padding-left: 0;
   border-left: none;
 }
diff -u b/core/themes/bartik/css/components/footer.css b/core/themes/bartik/css/components/footer.css
--- b/core/themes/bartik/css/components/footer.css
+++ b/core/themes/bartik/css/components/footer.css
@@ -3,31 +3,31 @@
  * Visual styles for Bartik's footer.
  */
-.footer-bottom .block {
+.site-footer__bottom .block {
   margin: 0.5em 0;
   padding: 0;
   border: none;
   clear: both;
 }
-.footer-bottom .block .content {
+.site-footer__bottom .block .content {
   padding: 0.5em 0;
   margin-top: 0;
 }
-.footer-bottom .block > h2 {
+.site-footer__bottom .block > h2 {
   /* @extend .visually-hidden */
   position: absolute !important;
   clip: rect(1px, 1px, 1px, 1px);
   overflow: hidden;
   height: 1px;
 }
-.footer-bottom .block h2 {
+.site-footer__bottom .block h2 {
   margin: 0;
 }
-.footer-bottom {
+.site-footer__bottom {
   letter-spacing: 0.2px;
   margin-top: 30px;
   border-top: 1px solid #555;
   border-color: rgba(255, 255, 255, 0.15);
 }
-.footer-bottom .region {
+.site-footer__bottom .region {
   margin-top: 20px;
 }
diff -u b/core/themes/bartik/css/layout.css b/core/themes/bartik/css/layout.css
--- b/core/themes/bartik/css/layout.css
+++ b/core/themes/bartik/css/layout.css
@@ -14,8 +14,8 @@
 #messages div.section,
 #main,
 #triptych,
-.footer-columns,
-.footer {
+.site-footer__upper,
+.site-footer__bottom {
   width: 100%;
   max-width: 860px;
   margin-left: auto;
@@ -138,17 +138,15 @@
 }
 
 @media all and (min-width: 851px) {
-/*
   #header div.section,
   #featured aside.section,
   #messages div.section,
   #main,
   #triptych,
-  .footer-columns,
-  .footer {
+  .site-footer__upper,
+  .site-footer__bottom {
     max-width: 1290px;
   }
-  */
   #content,
   #sidebar-first,
   #sidebar-second,
diff -u b/core/themes/bartik/templates/page.html.twig b/core/themes/bartik/templates/page.html.twig
--- b/core/themes/bartik/templates/page.html.twig
+++ b/core/themes/bartik/templates/page.html.twig
@@ -178,7 +178,7 @@
     <div class="site-footer__wrapper">
       <footer class="footer">
         {% if page.footer_firstcolumn or page.footer_secondcolumn or page.footer_thirdcolumn or page.footer_fourthcolumn %}
-          <div class="footer-columns" class="clearfix">
+          <div class="site-footer__upper" class="clearfix">
             {{ page.footer_firstcolumn }}
             {{ page.footer_secondcolumn }}
             {{ page.footer_thirdcolumn }}
@@ -186,7 +186,7 @@
           </div>
         {% endif %}
         {% if page.footer %}
-          <div class="footer-bottom" role="contentinfo" class="clearfix">
+          <div class="site-footer__bottom" role="contentinfo" class="clearfix">
             {{ page.footer }}
           </div>
         {% endif %}