Update label mixin and code mono font family

1 files changed, 15 insertions, 16 deletions

diff --git a/docs/elements.html b/docs/elements.html
index 4829359..ea723de 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -557,7 +557,6 @@
               <button class="btn loading-inline">default button</button>
               <button class="btn btn-primary">primary button</button>
               <button class="btn btn-link">link button</button>
-              <a class="btn btn-test">Button</a>
             </div>
           </div>
 
@@ -994,13 +993,13 @@
             <p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p>
           </div>
           <div class="columns">
-            <div class="column col-4">
+            <div class="column col-4 col-xs-12">
               <label class="form-label label-sm">Label</label>
             </div>
-            <div class="column col-4">
+            <div class="column col-4 col-xs-12">
               <input class="form-input input-sm" type="text" placeholder="Name" />
             </div>
-            <div class="column col-4">
+            <div class="column col-4 col-xs-12">
               <select class="form-select select-sm">
                 <option>Choose an option</option>
                 <option>Slack</option>
@@ -1010,13 +1009,13 @@
             </div>
           </div>
           <div class="columns">
-            <div class="column col-4">
+            <div class="column col-4 col-xs-12">
               <label class="form-label label-lg">Label</label>
             </div>
-            <div class="column col-4">
+            <div class="column col-4 col-xs-12">
               <input class="form-input input-lg" type="text" placeholder="Name" />
             </div>
-            <div class="column col-4">
+            <div class="column col-4 col-xs-12">
               <select class="form-select select-lg">
                 <option>Choose an option</option>
                 <option>Slack</option>
@@ -1032,19 +1031,19 @@
             <p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to &lt;input&gt; element. And add the icon with <code>form-icon</code> class next to the &lt;input&gt;.</p>
           </div>
           <div class="columns">
-            <div class="column col-4">
+            <div class="column col-4 col-xs-12">
               <div class="has-icon-left">
                 <input class="form-input input-sm" type="text" placeholder="Name" />
                 <i class="form-icon icon icon-arrow-right"></i>
               </div>
             </div>
-            <div class="column col-4">
+            <div class="column col-4 col-xs-12">
               <div class="has-icon-left tooltip" data-tooltip="Lorem ipsum dolor sit amet">
                 <input class="form-input" type="text" placeholder="Name" />
                 <i class="form-icon icon icon-arrow-right"></i>
               </div>
             </div>
-            <div class="column col-4">
+            <div class="column col-4 col-xs-12">
               <div class="has-icon-left">
                 <input class="form-input input-lg" type="text" placeholder="Name" />
                 <i class="form-icon icon icon-arrow-right"></i>
@@ -1052,19 +1051,19 @@
             </div>
           </div>
           <div class="columns">
-            <div class="column col-4">
+            <div class="column col-4 col-xs-12">
               <div class="has-icon-right">
                 <input class="form-input input-sm" type="text" placeholder="Name" />
                 <i class="form-icon icon icon-check"></i>
               </div>
             </div>
-            <div class="column col-4">
+            <div class="column col-4 col-xs-12">
               <div class="has-icon-right">
                 <input class="form-input" type="text" placeholder="Name" />
                 <i class="form-icon icon icon-check"></i>
               </div>
             </div>
-            <div class="column col-4">
+            <div class="column col-4 col-xs-12">
               <div class="has-icon-right">
                 <input class="form-input input-lg" type="text" placeholder="Name" />
                 <i class="form-icon icon icon-check"></i>
@@ -1085,19 +1084,19 @@
           </div>
 
           <div class="columns">
-            <div class="column col-4">
+            <div class="column col-4 col-xs-12">
               <div class="has-icon-right">
                 <input class="form-input input-sm" type="text" placeholder="Name" />
                 <i class="form-icon loading"></i>
               </div>
             </div>
-            <div class="column col-4">
+            <div class="column col-4 col-xs-12">
               <div class="has-icon-right">
                 <input class="form-input" type="text" placeholder="Name" />
                 <i class="form-icon loading"></i>
               </div>
             </div>
-            <div class="column col-4">
+            <div class="column col-4 col-xs-12">
               <div class="has-icon-right">
                 <input class="form-input input-lg" type="text" placeholder="Name" />
                 <i class="form-icon loading"></i>