From cd60cf3386adf840ad20349884e20f1989d1eeac Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 24 Dec 2014 15:45:37 -0800
Subject: custom forms: checkbox and radio stacked option

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

(limited to 'docs/components')

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 %}
-- 
cgit v1.2.3