From 4a554e5ff5fd8a2e82cfbea3f301049c0de48d2a Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 1 Jun 2017 08:06:17 -0700
Subject: trying out new validation styles

---
 docs/4.0/components/forms.md | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

(limited to 'docs')

diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 8fe2a9d26..6c3272dc1 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -897,6 +897,34 @@ Those same states can also be used with horizontal forms.
 </div>
 {% endexample %}
 
+### Validate with grid
+
+And in more complex grids.
+
+{% example html %}
+<div class="container">
+  <form>
+    <div class="form-group has-danger">
+      <label for="inputHorizontalDnger" class="form-control-label">Mailing address</label>
+      <input type="text" class="form-control mb-2" placeholder="Street address">
+      <div class="row gutters-sm">
+        <div class="col-7">
+          <input type="text" class="form-control is-validated" placeholder="City">
+        </div>
+        <div class="col">
+          <input type="text" class="form-control is-validated" placeholder="State">
+        </div>
+        <div class="col">
+          <input type="text" class="form-control" placeholder="Zip">
+        </div>
+      </div>
+      <div class="form-control-feedback">Something's not right with that field. Try again?</div>
+      <small class="form-text text-muted">Example help text that remains unchanged.</small>
+    </div>
+  </form>
+</div>
+{% endexample %}
+
 Checkboxes and radios are also supported.
 
 {% example html %}
-- 
cgit v1.2.3