diff --git a/docs/_includes/ads.html b/docs/_includes/ads.html
index b4c7639c..73bfadf0 100644
--- a/docs/_includes/ads.html
+++ b/docs/_includes/ads.html
@@ -1,8 +1,5 @@
-<!-- I don't know the proper id for the carbon ads
-<div id="carbonads-container">
-  <div class="carbonad">
-    <div id="azcarbon"></div>
-    <script>var z = document.createElement("script"); z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script>
+<div class="carbonad">
+  <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri" id="_carbonads_js"></script>
+  <div id="fakecb">Seems like you are using AdBlock to hide banners... Carbon ADS are quite nice and don't take much space, you may consider disabling it on this website.<br>This is the only AD on the entire website.<br><br>Thanks!
   </div>
 </div>
--->
diff --git a/docs/assets/scss/_masthead.scss b/docs/assets/scss/_masthead.scss
index bbb7fa4b..ee8b03c0 100644
--- a/docs/assets/scss/_masthead.scss
+++ b/docs/assets/scss/_masthead.scss
@@ -7,13 +7,13 @@
   padding: 3rem ($grid-gutter-width / 2) 2rem;
   color: $bd-purple-light;
   text-align: center;
-  background-image: linear-gradient(rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.4)), url(../assets/img/bg.jpg);
+  background-image: linear-gradient(rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.4)), url("../assets/img/bg.jpg");
   background-size: cover;
 
   .bd-booticon {
     margin: 0 auto 2rem;
-    color: #ffffff;
-    border-color: #ffffff;
+    color: #fff;
+    border-color: #fff;
   }
 
   h1 {
diff --git a/docs/assets/scss/bmd/_ads.scss b/docs/assets/scss/bmd/_ads.scss
new file mode 100644
index 00000000..267e109e
--- /dev/null
+++ b/docs/assets/scss/bmd/_ads.scss
@@ -0,0 +1,75 @@
+.carbonad {
+  background: none !important;
+}
+.carbonad div {
+  display: none;
+}
+
+.carbonad div:nth-child(2) {
+  display: block;
+}
+
+.carbonad {
+  width: auto !important;
+  height: auto !important;
+  padding: 1.25rem !important;
+  margin: 2rem ($grid-gutter-width * -1) -2rem !important;
+  overflow: hidden; // clearfix
+  font-family: inherit !important;
+  font-size: .8rem !important;
+  line-height: 1rem !important;
+  color: $bd-purple-light !important;
+  text-align: left;
+  background: darken($bd-purple, 10%) !important;
+  border: 0 !important;
+}
+
+.carbon-img {
+  margin: 0 !important;
+}
+
+.carbon-img img {
+  float: left;
+}
+
+.carbon-text,
+.carbon-poweredby {
+  display: block !important;
+  float: none !important;
+  width: auto !important;
+  height: auto !important;
+  margin-left: 145px !important;
+  font-family: inherit !important;
+}
+
+.carbon-text {
+  padding-top: 0 !important;
+  margin-bottom: .5em !important;
+  color: #fff !important;
+}
+
+.carbon-poweredby {
+  color: inherit !important;
+  text-align: left !important;
+}
+
+.carbon-text,
+.carbon-poweredby {
+  &:hover {
+    color: #fff !important;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .carbonad {
+    width: 330px !important;
+    padding: 1rem !important;
+    margin-right: auto !important;
+    margin-left: auto !important;
+    border-radius: .25rem;
+  }
+}
+
+@include media-breakpoint-up(md) {
+
+}
diff --git a/docs/assets/scss/bmd/_masthead.scss b/docs/assets/scss/bmd/_masthead.scss
new file mode 100644
index 00000000..55f98ef6
--- /dev/null
+++ b/docs/assets/scss/bmd/_masthead.scss
@@ -0,0 +1,4 @@
+.bs-masthead {
+  background-image: linear-gradient(rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.4)), url("../assets/img/bg.jpg");
+  background-size: cover;
+}
diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index bc03573d..704be0cb 100644
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -93,3 +93,5 @@ $bd-info:           $brand-info; // #5bc0de;
 @import 'bmd/clipboard-js';
 @import 'bmd/sidebar';
 @import 'bmd/drawer';
+@import 'bmd/masthead';
+@import 'bmd/ads';