fix form-horizontal code

1 files changed, 28 insertions, 18 deletions

diff --git a/index.html b/index.html
index b5baad9..2b0ef28 100644
--- a/index.html
+++ b/index.html
@@ -637,20 +637,26 @@
                 <div class="column col-6">
                     <form class="form-horizontal" action="#forms">
                         <div class="form-group">
-                            <label class="form-label col-3" for="input-example-4">Name</label>
-                            <div class="col-9">
+                            <div class="col-sm-3">
+                                <label class="form-label" for="input-example-4">Name</label>
+                            </div>
+                            <div class="col-sm-9">
                                 <input class="form-input" type="text" id="input-example-4" placeholder="Name" />
                             </div>
                         </div>
                         <div class="form-group">
-                            <label class="form-label col-3" for="input-example-5">Email</label>
-                            <div class="col-9">
+                            <div class="col-sm-3">
+                                <label class="form-label" for="input-example-5">Email</label>
+                            </div>
+                            <div class="col-sm-9">
                                 <input class="form-input" type="email" id="input-example-5" placeholder="Email" />
                             </div>
                         </div>
                         <div class="form-group">
-                            <label class="form-label col-3">Gender</label>
-                            <div class="col-9">
+                            <div class="col-sm-3">
+                                <label class="form-label">Gender</label>
+                            </div>
+                            <div class="col-sm-9">
                                 <label class="form-radio">
                                     <input type="radio" name="gender" />
                                     <i class="form-icon"></i> Male
@@ -662,8 +668,8 @@
                             </div>
                         </div>
                         <div class="form-group">
-                            <div class="col-3"></div>
-                            <div class="col-9">
+                            <div class="col-sm-3"></div>
+                            <div class="col-sm-9">
                                 <select class="form-select">
                                     <option>Choose an option</option>
                                     <option>Slack</option>
@@ -673,8 +679,8 @@
                             </div>
                         </div>
                         <div class="form-group">
-                            <div class="col-3"></div>
-                            <div class="col-9">
+                            <div class="col-sm-3"></div>
+                            <div class="col-sm-9">
                                 <label class="form-switch">
                                     <input type="checkbox" />
                                     <i class="form-icon"></i> Send me emails with news and tips
@@ -682,14 +688,16 @@
                             </div>
                         </div>
                         <div class="form-group">
-                            <label class="form-label col-3" for="input-example-6">Message</label>
-                            <div class="col-9">
+                            <div class="col-sm-3">
+                                <label class="form-label" for="input-example-6">Message</label>
+                            </div>
+                            <div class="col-sm-9">
                                 <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea>
                             </div>
                         </div>
                         <div class="form-group">
-                            <div class="col-3"></div>
-                            <div class="col-9">
+                            <div class="col-sm-3"></div>
+                            <div class="col-sm-9">
                                 <label class="form-checkbox">
                                     <input type="checkbox" />
                                     <i class="form-icon"></i> Remember me
@@ -697,8 +705,8 @@
                             </div>
                         </div>
                         <div class="form-group">
-                            <div class="col-3"></div>
-                            <div class="col-9">
+                            <div class="col-sm-3"></div>
+                            <div class="col-sm-9">
                                 <button class="btn btn-primary" type="submit">Submit</button>
                                 <button class="btn btn-link" type="reset">Cancel</button>
                             </div>
@@ -766,8 +774,10 @@
 <pre class="code lang-html">
 &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">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label col-3&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> <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-sm-3&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-sm-9&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;