From: Mark Otto <markdotto@gmail.com>
Date: Thu, 25 Dec 2014 01:00:43 +0000 (-0800)
Subject: add more explanation text
X-Git-Tag: v4.0.0-alpha~442
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=57d15cb4f8beba12ecb758ff6f5886338ce45d2e;p=thirdparty%2Fbootstrap.git

add more explanation text
---

diff --git a/docs/components/custom-forms.md b/docs/components/custom-forms.md
index f88d18dabf..93f0634f6c 100644
--- a/docs/components/custom-forms.md
+++ b/docs/components/custom-forms.md
@@ -7,6 +7,18 @@ In the interest of customization and cross browser consistency, Bootstrap includ
 
 ## Checkboxes and radios
 
+Each checkbox and radio is wrapped in a `<label>` for three reasons:
+
+- It provides a larger hit areas for checking the control.
+- It provides a helpful and semantic wrapper to help us replace the default `<input>`s.
+- It triggers the state of the `<input>` automatically, meaning no JavaScript is required.
+
+We hide the default `<input>` with `opacity` and use the `.c-indicator` to build a new custom form control. We can't build a custom one from just the `<input>` because CSS's `content` doesn't work on that element.
+
+With the sibling selector (`~`), we use the `:checked` state to trigger a makeshift checked state on the custom control.
+
+In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](http://useiconic.com/open). This provides us the best control for styling and positioning across browsers and devices.
+
 ### Checkboxes
 
 {% example html %}