diff --git a/docs/documentation/columns/options.html b/docs/documentation/columns/options.html
index 269dd3c80..01049b8d8 100644
--- a/docs/documentation/columns/options.html
+++ b/docs/documentation/columns/options.html
@@ -15,10 +15,10 @@
 {% capture columns_vcentered %}
 <div class="columns is-vcentered">
   <div class="column is-8">
-    <p class="bd-notification is-primary">First column</p>
+    <p class="notification is-primary">First column</p>
   </div>
   <div class="column">
-    <p class="bd-notification is-primary">
+    <p class="notification is-primary">
       Second column with more content. This is so you can see the vertical
       alignment.
     </p>
@@ -55,7 +55,7 @@
 {% endcapture %} {% capture columns_mobile_centered %}
 <div class="columns is-mobile is-centered">
   <div class="column is-half">
-    <p class="bd-notification is-primary">
+    <p class="notification is-primary">
       <code class="html">is-half</code><br />
     </p>
   </div>
@@ -63,31 +63,31 @@
 {% endcapture %} {% capture columns_mobile_multiline_centered %}
 <div class="columns is-mobile is-multiline is-centered">
   <div class="column is-narrow">
-    <p class="bd-notification is-primary">
+    <p class="notification is-primary">
       <code class="html">is-narrow</code><br />
       First Column
     </p>
   </div>
   <div class="column is-narrow">
-    <p class="bd-notification is-primary">
+    <p class="notification is-primary">
       <code class="html">is-narrow</code><br />
       Our Second Column
     </p>
   </div>
   <div class="column is-narrow">
-    <p class="bd-notification is-primary">
+    <p class="notification is-primary">
       <code class="html">is-narrow</code><br />
       Third Column
     </p>
   </div>
   <div class="column is-narrow">
-    <p class="bd-notification is-primary">
+    <p class="notification is-primary">
       <code class="html">is-narrow</code><br />
       The Fourth Column
     </p>
   </div>
   <div class="column is-narrow">
-    <p class="bd-notification is-primary">
+    <p class="notification is-primary">
       <code class="html">is-narrow</code><br />
       Fifth Column
     </p>
@@ -105,10 +105,10 @@
 
 <div class="columns is-vcentered">
   <div class="column is-8">
-    <p class="bd-notification is-primary">First column</p>
+    <p class="notification is-primary">First column</p>
   </div>
   <div class="column">
-    <p class="bd-notification is-primary">
+    <p class="notification is-primary">
       Second column with more content. This is so you can see the vertical
       alignment.
     </p>
@@ -129,31 +129,31 @@
 
 <div class="columns is-multiline is-mobile">
   <div class="column is-one-quarter">
-    <p class="bd-notification is-primary"><code>is-one-quarter</code></p>
+    <p class="notification is-primary"><code>is-one-quarter</code></p>
   </div>
   <div class="column is-one-quarter">
-    <p class="bd-notification is-primary"><code>is-one-quarter</code></p>
+    <p class="notification is-primary"><code>is-one-quarter</code></p>
   </div>
   <div class="column is-one-quarter">
-    <p class="bd-notification is-primary"><code>is-one-quarter</code></p>
+    <p class="notification is-primary"><code>is-one-quarter</code></p>
   </div>
   <div class="column is-one-quarter">
-    <p class="bd-notification is-primary"><code>is-one-quarter</code></p>
+    <p class="notification is-primary"><code>is-one-quarter</code></p>
   </div>
   <div class="column is-half">
-    <p class="bd-notification is-primary"><code>is-half</code></p>
+    <p class="notification is-primary"><code>is-half</code></p>
   </div>
   <div class="column is-one-quarter">
-    <p class="bd-notification is-primary"><code>is-one-quarter</code></p>
+    <p class="notification is-primary"><code>is-one-quarter</code></p>
   </div>
   <div class="column is-one-quarter">
-    <p class="bd-notification is-primary"><code>is-one-quarter</code></p>
+    <p class="notification is-primary"><code>is-one-quarter</code></p>
   </div>
   <div class="column is-one-quarter">
-    <p class="bd-notification is-primary"><code>is-one-quarter</code></p>
+    <p class="notification is-primary"><code>is-one-quarter</code></p>
   </div>
   <div class="column">
-    <p class="bd-notification is-primary">Auto</p>
+    <p class="notification is-primary">Auto</p>
   </div>
 </div>
 
@@ -171,7 +171,7 @@
 
 <div class="columns is-mobile is-centered">
   <div class="column is-half">
-    <p class="bd-notification is-primary">
+    <p class="notification is-primary">
       <code class="html">is-half</code><br />
     </p>
   </div>
@@ -188,31 +188,31 @@
 
 <div class="columns is-mobile is-multiline is-centered">
   <div class="column is-narrow">
-    <p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
+    <p class="notification is-primary" style="padding: 1.25rem 1.5rem">
       <code class="html">is-narrow</code><br />
       First Column
     </p>
   </div>
   <div class="column is-narrow">
-    <p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
+    <p class="notification is-primary" style="padding: 1.25rem 1.5rem">
       <code class="html">is-narrow</code><br />
       Our Second Column
     </p>
   </div>
   <div class="column is-narrow">
-    <p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
+    <p class="notification is-primary" style="padding: 1.25rem 1.5rem">
       <code class="html">is-narrow</code><br />
       Third Column
     </p>
   </div>
   <div class="column is-narrow">
-    <p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
+    <p class="notification is-primary" style="padding: 1.25rem 1.5rem">
       <code class="html">is-narrow</code><br />
       The Fourth Column
     </p>
   </div>
   <div class="column is-narrow">
-    <p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
+    <p class="notification is-primary" style="padding: 1.25rem 1.5rem">
       <code class="html">is-narrow</code><br />
       Fifth Column
     </p>