From: Mark Otto <markdotto@gmail.com>
Date: Fri, 28 Oct 2016 23:38:30 +0000 (-0700)
Subject: add horizontal form examples
X-Git-Tag: v4.0.0-alpha.6~468^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6a11ae580d0e233449aefdaf250b08019d7fe96d;p=thirdparty%2Fbootstrap.git

add horizontal form examples
---

diff --git a/docs/components/forms.md b/docs/components/forms.md
index cf5a8473e7..2a2e9f9d23 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -737,6 +737,41 @@ Here are some examples of the aforementioned classes in action. First up is your
 </div>
 {% endexample %}
 
+Those same states can also be used with horizontal forms.
+
+{% example html %}
+<div class="container">
+  <form>
+    <div class="form-group row has-success">
+      <label for="inputHorizontalSuccess" class="col-sm-2 col-form-label">Email</label>
+      <div class="col-sm-10">
+        <input type="email" class="form-control form-control-success" id="inputHorizontalSuccess" placeholder="name@example.com">
+        <div class="form-control-feedback">Success! You've done it.</div>
+        <small class="form-text text-muted">Example help text that remains unchanged.</small>
+      </div>
+    </div>
+    <div class="form-group row has-warning">
+      <label for="inputHorizontalWarning" class="col-sm-2 col-form-label">Email</label>
+      <div class="col-sm-10">
+        <input type="email" class="form-control form-control-warning" id="inputHorizontalWarning" placeholder="name@example.com">
+        <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
+        <small class="form-text text-muted">Example help text that remains unchanged.</small>
+      </div>
+    </div>
+    <div class="form-group row has-danger">
+      <label for="inputHorizontalDnger" class="col-sm-2 col-form-label">Email</label>
+      <div class="col-sm-10">
+        <input type="email" class="form-control form-control-danger" id="inputHorizontalDnger" placeholder="name@example.com">
+        <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
+        <small class="form-text text-muted">Example help text that remains unchanged.</small>
+      </div>
+    </div>
+  </form>
+</div>
+{% endexample %}
+
+Checkboxes and radios are also supported.
+
 {% example html %}
 <div class="form-check has-success">
   <label class="form-check-label">