aboutsummaryrefslogtreecommitdiff
path: root/docs/components
diff options
context:
space:
mode:
Diffstat (limited to 'docs/components')
-rw-r--r--docs/components/custom-forms.md27
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 %}