custom forms: checkbox and radio stacked option

1 files changed, 27 insertions, 0 deletions

diff --git a/docs/components/custom-forms.md b/docs/components/custom-forms.md
index de0fb7e7f..f88d18dab 100644
--- a/docs/components/custom-forms.md
+++ b/docs/components/custom-forms.md
@@ -3,6 +3,12 @@ layout: page
 title: Custom forms
 ---
 
+In the interest of customization and cross browser consistency, Bootstrap include a handful of customized form elements. They're solid replacements for default form controls as they're built on top of semantic and accessible markup.
+
+## Checkboxes and radios
+
+### Checkboxes
+
 {% example html %}
 <label class="c-input c-checkbox">
   <input type="checkbox">
@@ -11,6 +17,8 @@ title: Custom forms
 </label>
 {% endexample %}
 
+### Radios
+
 {% example html %}
 <label class="c-input c-radio">
   <input id="radio1" name="radio" type="radio">
@@ -23,3 +31,22 @@ title: Custom forms
   Or toggle this other custom radio
 </label>
 {% endexample %}
+
+### Stacked
+
+Custom checkboxes and radios are inline to start. Add a parent with class `.c-inputs-stacked` to ensure each form control is on separate lines.
+
+{% example html %}
+<div class="c-inputs-stacked">
+  <label class="c-input c-radio">
+    <input id="radioStacked1" name="radio-stacked" type="radio">
+    <span class="c-indicator"></span>
+    Toggle this custom radio
+  </label>
+  <label class="c-input c-radio">
+    <input id="radioStacked2" name="radio-stacked" type="radio">
+    <span class="c-indicator"></span>
+    Or toggle this other custom radio
+  </label>
+</div>
+{% endexample %}