From 59817a1729cf4978b2e134daabe0efcb80996290 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 10 Jun 2017 16:31:27 -0700
Subject: [PATCH] document server side fallbacks

---
 docs/4.0/components/forms.md | 38 +++++++++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 4ce1ac2679..845002c2fe 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -908,15 +908,43 @@ While these feedback styles cannot be styled with CSS, you can still customize t
     </div>
   </div>
 
+### Server side
+
+We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with `.is-invalid` and `.is-valid`. Note that `.invalid-feedback` is also supported with these classes.
+
+{% example html %}
+<form>
   <div class="row">
-    <div class="col-md-7 mb-3">
-      <input type="text" class="form-control" placeholder="City" required>
+    <div class="col-md-6 mb-3">
+      <label for="validationServer01">First name</label>
+      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
+    </div>
+    <div class="col-md-6 mb-3">
+      <label for="validationServer02">Last name</label>
+      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-6 mb-3">
+      <label for="validationServer03">City</label>
+      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
+      <div class="invalid-feedback">
+        Please provide a valid city.
+      </div>
     </div>
     <div class="col-md-3 mb-3">
-      <input type="text" class="form-control" placeholder="State" required>
+      <label for="validationServer04">State</label>
+      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
+      <div class="invalid-feedback">
+        Please provide a valid state.
+      </div>
     </div>
-    <div class="col-md-2 mb-3">
-      <input type="text" class="form-control" placeholder="Zip" required>
+    <div class="col-md-3 mb-3">
+      <label for="validationServer05">Zip</label>
+      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
+      <div class="invalid-feedback">
+        Please provide a valid zip.
+      </div>
     </div>
   </div>