diff options
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/custom-forms.md | 27 |
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 %} |
