Add bd classes

docs/documentation/form/file.html

@@ -593,7 +593,7 @@ variables:
 
     <div class="columns">
       <div class="column">
-        <div class="example">
+        <div class="bd-example">
           {{ file }}
         </div>
       </div>
@@ -611,7 +611,7 @@ variables:
             With the <code>.has-name</code> modifier combined with the <code>.file-name</code> element, you can add a <strong>placeholder</strong> for the selected file name.
           </p>
         </div>
-        <div class="example">
+        <div class="bd-example">
           {{ file_name }}
         </div>
       </div>
@@ -627,7 +627,7 @@ variables:
             You can move the CTA to the <strong>right side</strong> with the <code>.is-right</code> modifier.
           </p>
         </div>
-        <div class="example">
+        <div class="bd-example">
           {{ file_name_right }}
         </div>
       </div>
@@ -643,7 +643,7 @@ variables:
             You can also <strong>expand</strong> the name to fill up the space with the <code>.is-fullwidth</code> modifier.
           </p>
         </div>
-        <div class="example">
+        <div class="bd-example">
           {{ file_name_fullwidth }}
         </div>
       </div>
@@ -659,7 +659,7 @@ variables:
             You can have a <strong>boxed block</strong> with the <code>.is-boxed</code> modifier.
           </p>
         </div>
-        <div class="example">
+        <div class="bd-example">
           {{ file_boxed }}
         </div>
       </div>
@@ -675,7 +675,7 @@ variables:
             You can <strong>combine</strong> <code>.has-name</code> and <code>.is-boxed</code>.
           </p>
         </div>
-        <div class="example">
+        <div class="bd-example">
           {{ file_boxed_name }}
         </div>
       </div>
@@ -700,7 +700,7 @@ variables:
             {% endfor %}
           </ul>
         </div>
-        <div class="example">
+        <div class="bd-example">
           {{ file_colors }}
         </div>
       </div>
@@ -730,7 +730,7 @@ variables:
 
     <div class="columns">
       <div class="column">
-        <div class="example">
+        <div class="bd-example">
           {{ file_sizes }}
         </div>
       </div>
@@ -741,7 +741,7 @@ variables:
 
     <div class="columns">
       <div class="column">
-        <div class="example">
+        <div class="bd-example">
           {{ file_sizes_name }}
         </div>
       </div>
@@ -752,7 +752,7 @@ variables:
 
     <div class="columns">
       <div class="column">
-        <div class="example">
+        <div class="bd-example">
           {{ file_sizes_boxed }}
         </div>
       </div>
@@ -763,7 +763,7 @@ variables:
 
     <div class="columns">
       <div class="column">
-        <div class="example">
+        <div class="bd-example">
           {{ file_sizes_boxed_name }}
         </div>
       </div>
@@ -790,7 +790,7 @@ variables:
 
     <div class="columns">
       <div class="column">
-        <div class="example">
+        <div class="bd-example">
           {{ file_centered }}
         </div>
       </div>
@@ -801,7 +801,7 @@ variables:
 
     <div class="columns">
       <div class="column">
-        <div class="example">
+        <div class="bd-example">
           {{ file_right }}
         </div>
       </div>

docs/documentation/form/general.html

@@ -993,7 +993,7 @@ doc-subtab: general
     <div class="content">
       <p>If you want to <strong>attach controls</strong> together, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
     </div>
-    <div class="example">
+    <div class="bd-example">
       {{addons_example}}
     </div>
     {% highlight html %}{{addons_example}}{% endhighlight %}
@@ -1009,7 +1009,7 @@ doc-subtab: general
       <p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
     </div>
 
-    <div class="example">
+    <div class="bd-example">
       {{addons_static_example}}
     </div>
     {% highlight html %}{{addons_static_example}}{% endhighlight %}
@@ -1017,7 +1017,7 @@ doc-subtab: general
     <div class="content">
       <p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the input):</p>
     </div>
-    <div class="example">
+    <div class="bd-example">
       {{addons_expanded_example}}
     </div>
     {% highlight html %}{{addons_expanded_example}}{% endhighlight %}
@@ -1025,7 +1025,7 @@ doc-subtab: general
     <div class="content">
       <p>If you want a full width select dropdown, pair <code>control is-expanded</code> with <code>select is-fullwidth</code>.</p>
     </div>
-    <div class="example">
+    <div class="bd-example">
       {{addons_expanded_fullwidth_example}}
     </div>
     {% highlight html %}{{addons_expanded_fullwidth_example}}{% endhighlight %}
@@ -1033,11 +1033,11 @@ doc-subtab: general
     <div class="content">
       <p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifers to alter the <strong>alignment</strong>.</p>
     </div>
-    <div class="example">
+    <div class="bd-example">
       {{addons_center_example}}
     </div>
     {% highlight html %}{{addons_center_example}}{% endhighlight %}
-    <div class="example">
+    <div class="bd-example">
       {{addons_right_example}}
     </div>
     {% highlight html %}{{addons_right_example}}{% endhighlight %}
@@ -1051,7 +1051,7 @@ doc-subtab: general
       </p>
     </div>
 
-    <div class="example">
+    <div class="bd-example">
       {{group_example}}
     </div>
     {% highlight html %}{{group_example}}{% endhighlight %}
@@ -1061,12 +1061,12 @@ doc-subtab: general
       </p>
     </div>
 
-    <div class="example">
+    <div class="bd-example">
       {{group_centered_example}}
     </div>
     {% highlight html %}{{group_centered_example}}{% endhighlight %}
 
-    <div class="example">
+    <div class="bd-example">
       {{group_right_example}}
     </div>
     {% highlight html %}{{group_right_example}}{% endhighlight %}
@@ -1077,7 +1077,7 @@ doc-subtab: general
       </p>
     </div>
 
-    <div class="example">
+    <div class="bd-example">
       {{group_expanded_example}}
     </div>
     {% highlight html %}{{group_expanded_example}}{% endhighlight %}
@@ -1094,7 +1094,7 @@ doc-subtab: general
 
     <div class="columns">
       <div class="column is-half">
-        <div class="example">
+        <div class="bd-example">
           {{group_multiline_example}}
         </div>
       </div>
@@ -1118,7 +1118,7 @@ doc-subtab: general
       </ul>
       <p>You can use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
     </div>
-    <div class="example">
+    <div class="bd-example">
       {{horizontal_form_example}}
     </div>
     {% highlight html %}{{horizontal_form_example}}{% endhighlight %}
@@ -1142,7 +1142,7 @@ doc-subtab: general
         </li>
       </ul>
     </div>
-    <div class="example">
+    <div class="bd-example">
       {{field_label_example}}
     </div>
     {% highlight html %}{{field_label_example}}{% endhighlight %}