From 3e76d6565603fafa2c85ad81d7b6345c4e279c72 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 28 May 2017 22:50:57 -0700 Subject: Rearrange all the docs to allow for a docs/major.minor/ setup --- docs/4.0/components/forms.md | 1018 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1018 insertions(+) create mode 100644 docs/4.0/components/forms.md (limited to 'docs/4.0/components/forms.md') diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md new file mode 100644 index 000000000..366f8f625 --- /dev/null +++ b/docs/4.0/components/forms.md @@ -0,0 +1,1018 @@ +--- +layout: docs +title: Forms +description: Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. +group: components +toc: true +--- + +## Form controls + +Bootstrap's form controls expand on [our Rebooted form styles]({{ site.baseurl }}/content/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes. + +Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `type` attribute**. + +{% example html %} +
+
+ + + We'll never share your email with anyone else. +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line. +
+
+ Radio buttons +
+ +
+
+ +
+
+ +
+
+
+ +
+ +
+{% endexample %} + +Below is a complete list of the specific form controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassesUsed forSupported variations
+ {% markdown %}`.form-group`{% endmarkdown %} + + Any group of form controls + + {% markdown %}Use with any block-level element like `
` or `
`{% endmarkdown %} +
+ {% markdown %}`.form-control`{% endmarkdown %} + + Textual inputs + + {% markdown %}`text`, `password`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`{% endmarkdown %} +
+ Select menus + + {% markdown %}`multiple`, `size`{% endmarkdown %} +
+ Textareas + + N/A +
+ {% markdown %}`.form-control-file`{% endmarkdown %} + + File inputs + + {% markdown %}`file`{% endmarkdown %} +
+{% markdown %} +`.form-check` +{% endmarkdown %} + + Checkboxes and radios + + N/A +
+ +### Textual inputs + +Here are examples of `.form-control` applied to each textual HTML5 `` `type`. + +{% example html %} +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+{% endexample %} + +## Form layouts + +Since Bootstrap applies `display: block` and `width: 100%` to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis. + +### Form groups + +The `.form-group` class is the easiest way to add some structure to forms. Its only purpose is to provide `margin-bottom` around a label and control pairing. As a bonus, since it's a class you can use it with `
`s, `
`s, or nearly any other element. + +{% example html %} +
+
+ + +
+
+ + +
+
+{% endexample %} + +### Inline forms + +Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states. + +- Controls are `display: flex`, collapsing any HTML white space and allowing you to provide alignment control with [spacing]({{ site.baseurl }}/utilities/spacing/) and [flexbox]({{ site.baseurl }}/utilities/flexbox/) utilities. +- Controls and input groups receive `width: auto` to override the Bootstrap default `width: 100%`. +- Controls **only appear inline in viewports that are at least 576px wide** to account for narrow viewports on mobile devices. + +You may need to manually address the width and alignment of individual form controls with [spacing utilities]({{ site.baseurl }}/utilities/spacing/) (as shown below). Lastly, be sure to always include a `