diff --git a/docs/_includes/comparison.html b/docs/_includes/comparison.html
index ebcd8077..6a9d6ff5 100644
--- a/docs/_includes/comparison.html
+++ b/docs/_includes/comparison.html
@@ -29,12 +29,12 @@
   </td>
 </tr>
 <tr>
-  <td class="is-unique">
+  <td class="bd-is-unique">
     <a href="{{ site.url }}/documentation/grid/tiles/">
       tile
     </a>
   </td>
-  <td class="is-empty">
+  <td class="bd-is-empty">
     <span>–</span>
   </td>
 </tr>
@@ -44,12 +44,12 @@
   </th>
 </tr>
 <tr>
-  <td class="is-unique">
+  <td class="bd-is-unique">
     <a href="{{ site.url }}/documentation/form/general/">
       field
     </a>
   </td>
-  <td class="is-empty">
+  <td class="bd-is-empty">
     <span>–</span>
   </td>
 </tr>
@@ -126,12 +126,12 @@
   </td>
 </tr>
 <tr>
-  <td class="is-unique">
+  <td class="bd-is-unique">
     <a href="{{ site.url }}/documentation/form/select/">
       select
     </a>
   </td>
-  <td class="is-empty">
+  <td class="bd-is-empty">
     <span>–</span>
   </td>
 </tr>
@@ -160,12 +160,12 @@
   </td>
 </tr>
 <tr>
-  <td class="is-unique">
+  <td class="bd-is-unique">
     <a href="{{ site.url }}/documentation/form/file/">
       file
     </a>
   </td>
-  <td class="is-empty">
+  <td class="bd-is-empty">
     <span>–</span>
   </td>
 </tr>
@@ -187,12 +187,12 @@
   </th>
 </tr>
 <tr>
-  <td class="is-unique">
+  <td class="bd-is-unique">
     <a href="{{ site.url }}/documentation/elements/box/">
       box
     </a>
   </td>
-  <td class="is-empty">
+  <td class="bd-is-empty">
     <span>–</span>
   </td>
 </tr>
@@ -209,12 +209,12 @@
   </td>
 </tr>
 <tr>
-  <td class="is-unique">
+  <td class="bd-is-unique">
     <a href="{{ site.url }}/documentation/elements/content/">
       content
     </a>
   </td>
-  <td class="is-empty">
+  <td class="bd-is-empty">
     <span>–</span>
   </td>
 </tr>
@@ -351,20 +351,20 @@
   </td>
 </tr>
 <tr>
-  <td class="is-empty">
+  <td class="bd-is-empty">
     –
   </td>
-  <td class="is-unique">
+  <td class="bd-is-unique">
     <a href="http://getbootstrap.com/css/#type-lists" target="_blank">
       lists
     </a>
   </td>
 </tr>
 <tr>
-  <td class="is-empty">
+  <td class="bd-is-empty">
     –
   </td>
-  <td class="is-unique">
+  <td class="bd-is-unique">
     <a href="http://getbootstrap.com/css/#caret" target="_blank">
       caret
     </a>
@@ -388,12 +388,12 @@
   </td>
 </tr>
 <tr>
-  <td class="is-unique">
+  <td class="bd-is-unique">
     <a href="{{ site.url }}/documentation/components/card/">
       card
     </a>
   </td>
-  <td class="is-empty">
+  <td class="bd-is-empty">
     <span>–</span>
   </td>
 </tr>
@@ -410,20 +410,20 @@
   </td>
 </tr>
 <tr>
-  <td class="is-unique">
+  <td class="bd-is-unique">
     <a href="{{ site.url }}/documentation/components/level/">
       level
     </a>
   </td>
-  <td class="is-empty">
+  <td class="bd-is-empty">
     <span>–</span>
   </td>
 </tr>
 <tr>
-  <td class="is-empty">
+  <td class="bd-is-empty">
     –
   </td>
-  <td class="is-unique">
+  <td class="bd-is-unique">
     <a href="http://getbootstrap.com/components/#list-group" target="_blank">
       list group
     </a>
@@ -442,12 +442,12 @@
   </td>
 </tr>
 <tr>
-  <td class="is-unique">
+  <td class="bd-is-unique">
     <a href="{{ site.url }}/documentation/components/menu/">
       menu
     </a>
   </td>
-  <td class="is-empty">
+  <td class="bd-is-empty">
     <span>–</span>
   </td>
 </tr>
@@ -488,10 +488,10 @@
   </td>
 </tr>
 <tr>
-  <td class="is-empty">
+  <td class="bd-is-empty">
     –
   </td>
-  <td class="is-unique">
+  <td class="bd-is-unique">
     <a href="http://getbootstrap.com/components/#page-header" target="_blank">
       page header
     </a>
@@ -510,12 +510,12 @@
   </td>
 </tr>
 <tr>
-  <td class="is-unique">
+  <td class="bd-is-unique">
     <a href="{{ site.url }}/documentation/components/panel/">
       panel
     </a>
   </td>
-  <td class="is-empty">
+  <td class="bd-is-empty">
     <span>–</span>
   </td>
 </tr>
@@ -532,10 +532,10 @@
   </td>
 </tr>
 <tr>
-  <td class="is-empty">
+  <td class="bd-is-empty">
     –
   </td>
-  <td class="is-unique">
+  <td class="bd-is-unique">
     <a href="http://getbootstrap.com/components/#wells" target="_blank">
       wells
     </a>
@@ -571,22 +571,22 @@
   </td>
 </tr>
 <tr>
-  <td class="is-unique">
+  <td class="bd-is-unique">
     <a href="{{ site.url }}/documentation/layout/section/">
       section
     </a>
   </td>
-  <td class="is-empty">
+  <td class="bd-is-empty">
     <span>–</span>
   </td>
 </tr>
 <tr>
-  <td class="is-unique">
+  <td class="bd-is-unique">
     <a href="{{ site.url }}/documentation/layout/footer/">
       footer
     </a>
   </td>
-  <td class="is-empty">
+  <td class="bd-is-empty">
     <span>–</span>
   </td>
-</tr>
\ No newline at end of file
+</tr>
diff --git a/docs/_includes/pro.html b/docs/_includes/pro.html
index d1c7faa2..b7bf2b03 100644
--- a/docs/_includes/pro.html
+++ b/docs/_includes/pro.html
@@ -1,4 +1,4 @@
-<article class="media bd-pro is-{{ include.type }}">
+<article class="media bd-pro bd-is-{{ include.type }}">
   <aside class="media-left">
     <span class="icon">
       <i class="fa fa-{{ include.icon }}"></i>
diff --git a/docs/_javascript/bulma.js b/docs/_javascript/bulma.js
index b09722d4..a5e956d0 100644
--- a/docs/_javascript/bulma.js
+++ b/docs/_javascript/bulma.js
@@ -35,8 +35,8 @@ jQuery(document).ready(function ($) {
 
   $highlights.each(function() {
     var $el = $(this);
-    var copy = '<button class="copy">Copy</button>';
-    var expand = '<button class="expand">Expand</button>';
+    var copy = '<button class="bd-copy">Copy</button>';
+    var expand = '<button class="bd-expand">Expand</button>';
     $el.append(copy);
 
     if ($el.find('pre code').innerHeight() > 600) {
@@ -44,7 +44,7 @@ jQuery(document).ready(function ($) {
     }
   });
 
-  var $highlightButtons = $('.highlight .copy, .highlight .expand');
+  var $highlightButtons = $('.highlight .bd-copy, .highlight .bd-expand');
 
   $highlightButtons.hover(function() {
     $(this).parent().css('box-shadow', '0 0 0 1px #ed6c63');
@@ -52,11 +52,11 @@ jQuery(document).ready(function ($) {
     $(this).parent().css('box-shadow', 'none');
   });
 
-  $('.highlight .expand').click(function() {
+  $('.highlight .bd-expand').click(function() {
     $(this).parent().children('pre').css('max-height', 'none');
   });
 
-  new Clipboard('.copy', {
+  new Clipboard('.bd-copy', {
     target: function(trigger) {
       return trigger.previousSibling;
     }
diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js
index c9fe455a..7f612bea 100644
--- a/docs/_javascript/main.js
+++ b/docs/_javascript/main.js
@@ -103,8 +103,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
   if ($highlights.length > 0) {
     $highlights.forEach($el => {
-      const copy = '<button class="copy">Copy</button>';
-      const expand = '<button class="expand">Expand</button>';
+      const copy = '<button class="bd-copy">Copy</button>';
+      const expand = '<button class="bd-expand">Expand</button>';
       $el.insertAdjacentHTML('beforeend', copy);
 
       if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
@@ -119,7 +119,7 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   function addHighlightControls() {
-    const $highlightButtons = getAll('.highlight .copy, .highlight .expand');
+    const $highlightButtons = getAll('.highlight .bd-copy, .highlight .bd-expand');
 
     $highlightButtons.forEach($el => {
       $el.addEventListener('mouseenter', () => {
@@ -131,7 +131,7 @@ document.addEventListener('DOMContentLoaded', () => {
       });
     });
 
-    const $highlightExpands = getAll('.highlight .expand');
+    const $highlightExpands = getAll('.highlight .bd-expand');
 
     $highlightExpands.forEach($el => {
       $el.addEventListener('click', () => {
@@ -140,7 +140,7 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
-  new Clipboard('.copy', {
+  new Clipboard('.bd-copy', {
     target: function(trigger) {
       return trigger.previousSibling;
     }
diff --git a/docs/_sass/bootstrap.sass b/docs/_sass/bootstrap.sass
index 603a4bcf..5c7335d8 100644
--- a/docs/_sass/bootstrap.sass
+++ b/docs/_sass/bootstrap.sass
@@ -46,11 +46,11 @@ $bootstrap-invert: #fff
   p:not(:last-child)
     margin-bottom: 0.5rem
 
-.bd-pro.is-bulma
+.bd-pro.bd-is-bulma
   .icon
     color: $primary
 
-.bd-pro.is-bootstrap
+.bd-pro.bd-is-bootstrap
   .icon
     color: $bootstrap
 
@@ -85,10 +85,10 @@ $bootstrap-invert: #fff
         color: currentColor
         &:hover
           text-decoration: underline
-    .is-empty
+    .bd-is-empty
       background-color: $background
       color: $text-light
-    .is-unique
+    .bd-is-unique
       background-color: rgba($green, 0.25)
       color: $text-strong
       font-weight: $weight-bold
diff --git a/docs/_sass/example.sass b/docs/_sass/example.sass
index d208c44a..9893aa6a 100644
--- a/docs/_sass/example.sass
+++ b/docs/_sass/example.sass
@@ -91,8 +91,8 @@ $structure-invert: $danger-invert
 
 .highlight
   position: relative
-  .copy,
-  .expand
+  .bd-copy,
+  .bd-expand
     +unselectable
     background: $white
     border: solid $border
@@ -106,7 +106,7 @@ $structure-invert: $danger-invert
     &:hover
       border-color: $code
       color: $code
-  .expand
+  .bd-expand
     border-right-width: 1px
     right: 50px
   +tablet
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 42687ecf..6a65b576 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -9514,8 +9514,8 @@ html.route-index #carbon {
   position: relative;
 }
 
-.highlight .copy,
-.highlight .expand {
+.highlight .bd-copy,
+.highlight .bd-expand {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -9532,13 +9532,13 @@ html.route-index #carbon {
   top: 0;
 }
 
-.highlight .copy:hover,
-.highlight .expand:hover {
+.highlight .bd-copy:hover,
+.highlight .bd-expand:hover {
   border-color: #ff3860;
   color: #ff3860;
 }
 
-.highlight .expand {
+.highlight .bd-expand {
   border-right-width: 1px;
   right: 50px;
 }
@@ -10299,11 +10299,11 @@ html.route-index .hero.is-primary a.column:hover .title strong {
   margin-bottom: 0.5rem;
 }
 
-.bd-pro.is-bulma .icon {
+.bd-pro.bd-is-bulma .icon {
   color: #00d1b2;
 }
 
-.bd-pro.is-bootstrap .icon {
+.bd-pro.bd-is-bootstrap .icon {
   color: #6f5499;
 }
 
@@ -10354,12 +10354,12 @@ html.route-index .hero.is-primary a.column:hover .title strong {
   text-decoration: underline;
 }
 
-.bd-comparison .table .is-empty {
+.bd-comparison .table .bd-is-empty {
   background-color: whitesmoke;
   color: #7a7a7a;
 }
 
-.bd-comparison .table .is-unique {
+.bd-comparison .table .bd-is-unique {
   background-color: rgba(35, 209, 96, 0.25);
   color: #363636;
   font-weight: 700;
diff --git a/docs/lib/bulma.js b/docs/lib/bulma.js
index 62e5bc97..69f262a8 100644
--- a/docs/lib/bulma.js
+++ b/docs/lib/bulma.js
@@ -37,8 +37,8 @@ jQuery(document).ready(function ($) {
 
   $highlights.each(function () {
     var $el = $(this);
-    var copy = '<button class="copy">Copy</button>';
-    var expand = '<button class="expand">Expand</button>';
+    var copy = '<button class="bd-copy">Copy</button>';
+    var expand = '<button class="bd-expand">Expand</button>';
     $el.append(copy);
 
     if ($el.find('pre code').innerHeight() > 600) {
@@ -46,7 +46,7 @@ jQuery(document).ready(function ($) {
     }
   });
 
-  var $highlightButtons = $('.highlight .copy, .highlight .expand');
+  var $highlightButtons = $('.highlight .bd-copy, .highlight .bd-expand');
 
   $highlightButtons.hover(function () {
     $(this).parent().css('box-shadow', '0 0 0 1px #ed6c63');
@@ -54,11 +54,11 @@ jQuery(document).ready(function ($) {
     $(this).parent().css('box-shadow', 'none');
   });
 
-  $('.highlight .expand').click(function () {
+  $('.highlight .bd-expand').click(function () {
     $(this).parent().children('pre').css('max-height', 'none');
   });
 
-  new Clipboard('.copy', {
+  new Clipboard('.bd-copy', {
     target: function target(trigger) {
       return trigger.previousSibling;
     }
diff --git a/docs/lib/main.js b/docs/lib/main.js
index 99a89737..b0b45c1d 100644
--- a/docs/lib/main.js
+++ b/docs/lib/main.js
@@ -105,8 +105,8 @@ document.addEventListener('DOMContentLoaded', function () {
 
   if ($highlights.length > 0) {
     $highlights.forEach(function ($el) {
-      var copy = '<button class="copy">Copy</button>';
-      var expand = '<button class="expand">Expand</button>';
+      var copy = '<button class="bd-copy">Copy</button>';
+      var expand = '<button class="bd-expand">Expand</button>';
       $el.insertAdjacentHTML('beforeend', copy);
 
       if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
@@ -121,7 +121,7 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   function addHighlightControls() {
-    var $highlightButtons = getAll('.highlight .copy, .highlight .expand');
+    var $highlightButtons = getAll('.highlight .bd-copy, .highlight .bd-expand');
 
     $highlightButtons.forEach(function ($el) {
       $el.addEventListener('mouseenter', function () {
@@ -133,7 +133,7 @@ document.addEventListener('DOMContentLoaded', function () {
       });
     });
 
-    var $highlightExpands = getAll('.highlight .expand');
+    var $highlightExpands = getAll('.highlight .bd-expand');
 
     $highlightExpands.forEach(function ($el) {
       $el.addEventListener('click', function () {
@@ -142,7 +142,7 @@ document.addEventListener('DOMContentLoaded', function () {
     });
   }
 
-  new Clipboard('.copy', {
+  new Clipboard('.bd-copy', {
     target: function target(trigger) {
       return trigger.previousSibling;
     }