Add responsive horizontal form support #375

1 files changed, 15 insertions, 15 deletions

diff --git a/docs/elements.html b/docs/elements.html
index 4143edd..f2b8527 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -1030,32 +1030,32 @@
 
         <h4 id="forms-horizontal" class="s-subtitle">Horizontal forms</h4>
         <div class="docs-note">
-          <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the &lt;form&gt; container. And add the <code>col-[1-12]</code> class to the child elements for form row layout. </p>
+          <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the &lt;form&gt; container. And add the <code>col-[1-12]</code> and <code>col-xs/sm/lg/xl-[1-12]</code> class to the child elements for responsive form row layout. </p>
         </div>
         <div class="columns">
           <div class="column col-9 col-sm-12">
             <form class="form-horizontal" action="#forms">
               <div class="form-group">
-                <div class="col-3">
+                <div class="col-3 col-sm-12">
                   <label class="form-label" for="input-example-4">Name</label>
                 </div>
-                <div class="col-9">
+                <div class="col-9 col-sm-12">
                   <input class="form-input" type="text" id="input-example-4" placeholder="Name">
                 </div>
               </div>
               <div class="form-group">
-                <div class="col-3">
+                <div class="col-3 col-sm-12">
                   <label class="form-label" for="input-example-5">Email</label>
                 </div>
-                <div class="col-9">
+                <div class="col-9 col-sm-12">
                   <input class="form-input" type="email" id="input-example-5" placeholder="Email">
                 </div>
               </div>
               <div class="form-group">
-                <div class="col-3">
+                <div class="col-3 col-sm-12">
                   <label class="form-label">Gender</label>
                 </div>
-                <div class="col-9">
+                <div class="col-9 col-sm-12">
                   <label class="form-radio">
                     <input type="radio" name="gender">
                     <i class="form-icon"></i> Male
@@ -1067,10 +1067,10 @@
                 </div>
               </div>
               <div class="form-group">
-                <div class="col-3">
+                <div class="col-3 col-sm-12">
                   <label class="form-label">Source</label>
                 </div>
-                <div class="col-9">
+                <div class="col-9 col-sm-12">
                   <select class="form-select" multiple>
                     <option>Slack</option>
                     <option>Skype</option>
@@ -1079,7 +1079,7 @@
                 </div>
               </div>
               <div class="form-group">
-                <div class="col-9 col-ml-auto">
+                <div class="col-9 col-sm-12 col-ml-auto">
                   <label class="form-switch">
                     <input type="checkbox">
                     <i class="form-icon"></i> Send me emails with news and tips
@@ -1087,15 +1087,15 @@
                 </div>
               </div>
               <div class="form-group">
-                <div class="col-3">
+                <div class="col-3 col-sm-12">
                   <label class="form-label" for="input-example-6">Message</label>
                 </div>
-                <div class="col-9">
+                <div class="col-9 col-sm-12">
                   <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea>
                 </div>
               </div>
               <div class="form-group">
-                <div class="col-9 col-ml-auto">
+                <div class="col-9 col-sm-12 col-ml-auto">
                   <label class="form-checkbox">
                     <input type="checkbox">
                     <i class="form-icon"></i> Remember me
@@ -1109,10 +1109,10 @@
 <!-- forms -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">form</span> <span class="atn">class</span>=<span class="atv">&quot;form-horizontal&quot;</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
-    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-3&quot;</span>&gt;
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-3 col-sm-12&quot;</span>&gt;
       &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
     &lt;<span class="tag">/div</span>&gt;
-    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-9&quot;</span>&gt;
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-9 col-sm-12&quot;</span>&gt;
       &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Name&quot;</span>&gt;
     &lt;<span class="tag">/div</span>&gt;
   &lt;<span class="tag">/div</span>&gt;