mirror of
https://github.com/twbs/bootstrap.git
synced 2025-11-04 00:03:15 -05:00
c0a64e989a
* Remove about generated button of file form * Remove and merge layout examples of custom forms * Clarify id/for * Change some spacing classes for consistency
367 lines
14 KiB
Markdown
367 lines
14 KiB
Markdown
---
|
|
layout: docs
|
|
title: Layout
|
|
description: Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.
|
|
group: forms
|
|
toc: true
|
|
---
|
|
|
|
## Forms
|
|
|
|
Every group of form fields should reside in a `<form>` element. Bootstrap provides no default styling for the `<form>` element, but there are some powerful browser features that are provided by default.
|
|
|
|
- New to browser forms? Consider reviewing [the MDN form docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) for an overview and complete list of available attributes.
|
|
- `<button>`s within a `<form>` default to `type="submit"`, so strive to be specific and always include a `type`.
|
|
- You can disable every form element within a form with the `disabled` attribute on the `<form>`.
|
|
|
|
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.
|
|
|
|
## Utilities
|
|
|
|
[Margin utilities]({{< docsref "/utilities/spacing" >}}) are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional help text, and form validation messaging. We recommend sticking to `margin-bottom` utilities, and using a single direction throughout the form for consistency.
|
|
|
|
Feel free to build your forms however you like, with `<fieldset>`s, `<div>`s, or nearly any other element.
|
|
|
|
{{< example >}}
|
|
<form>
|
|
<div class="mb-3">
|
|
<label for="formGroupExampleInput">Example label</label>
|
|
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="formGroupExampleInput2">Another label</label>
|
|
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
|
|
</div>
|
|
</form>
|
|
{{< /example >}}
|
|
|
|
## Form grid
|
|
|
|
More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options. **Requires the `$enable-grid-classes` Sass variable to be enabled** (on by default).
|
|
|
|
{{< example >}}
|
|
<form>
|
|
<div class="row">
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="First name">
|
|
</div>
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="Last name">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{{< /example >}}
|
|
|
|
## Form row
|
|
|
|
You may also swap `.row` for `.form-row`, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts. **Also requires the `$enable-grid-classes` Sass variable to be enabled** (on by default).
|
|
|
|
{{< example >}}
|
|
<form>
|
|
<div class="form-row">
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="First name">
|
|
</div>
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="Last name">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{{< /example >}}
|
|
|
|
More complex layouts can also be created with the grid system.
|
|
|
|
{{< example >}}
|
|
<form>
|
|
<div class="form-row">
|
|
<div class="mb-3 col-md-6">
|
|
<label for="inputEmail4">Email</label>
|
|
<input type="email" class="form-control" id="inputEmail4">
|
|
</div>
|
|
<div class="mb-3 col-md-6">
|
|
<label for="inputPassword4">Password</label>
|
|
<input type="password" class="form-control" id="inputPassword4">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="inputAddress">Address</label>
|
|
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="inputAddress2">Address 2</label>
|
|
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="mb-3 col-md-6">
|
|
<label for="inputCity">City</label>
|
|
<input type="text" class="form-control" id="inputCity">
|
|
</div>
|
|
<div class="mb-3 col-md-4">
|
|
<label for="inputState">State</label>
|
|
<select id="inputState" class="form-select">
|
|
<option selected>Choose...</option>
|
|
<option>...</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3 col-md-2">
|
|
<label for="inputZip">Zip</label>
|
|
<input type="text" class="form-control" id="inputZip">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="gridCheck">
|
|
<label class="form-check-label" for="gridCheck">
|
|
Check me out
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Sign in</button>
|
|
</form>
|
|
{{< /example >}}
|
|
|
|
## Horizontal form
|
|
|
|
Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `<label>`s as well so they're vertically centered with their associated form controls.
|
|
|
|
At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we've removed the `padding-top` on our stacked radio inputs label to better align the text baseline.
|
|
|
|
{{< example >}}
|
|
<form>
|
|
<div class="mb-3 row">
|
|
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
|
|
<div class="col-sm-10">
|
|
<input type="email" class="form-control" id="inputEmail3">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
|
|
<div class="col-sm-10">
|
|
<input type="password" class="form-control" id="inputPassword3">
|
|
</div>
|
|
</div>
|
|
<fieldset class="mb-3">
|
|
<div class="row">
|
|
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
|
|
<div class="col-sm-10">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
|
|
<label class="form-check-label" for="gridRadios1">
|
|
First radio
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
|
|
<label class="form-check-label" for="gridRadios2">
|
|
Second radio
|
|
</label>
|
|
</div>
|
|
<div class="form-check disabled">
|
|
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
|
|
<label class="form-check-label" for="gridRadios3">
|
|
Third disabled radio
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<div class="mb-3 row">
|
|
<div class="col-sm-2">Checkbox</div>
|
|
<div class="col-sm-10">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="gridCheck1">
|
|
<label class="form-check-label" for="gridCheck1">
|
|
Example checkbox
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<div class="col-sm-10">
|
|
<button type="submit" class="btn btn-primary">Sign in</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{{< /example >}}
|
|
|
|
### Horizontal form label sizing
|
|
|
|
Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.
|
|
|
|
{{< example >}}
|
|
<form>
|
|
<div class="mb-3 row">
|
|
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
|
|
<div class="col-sm-10">
|
|
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
|
|
<div class="col-sm-10">
|
|
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
|
|
<div class="col-sm-10">
|
|
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{{< /example >}}
|
|
|
|
## Column sizing
|
|
|
|
As shown in the previous examples, our grid system allows you to place any number of `.col`s within a `.row` or `.form-row`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `.col`s equally split the rest, with specific column classes like `.col-7`.
|
|
|
|
{{< example >}}
|
|
<form>
|
|
<div class="form-row">
|
|
<div class="col-7">
|
|
<input type="text" class="form-control" placeholder="City">
|
|
</div>
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="State">
|
|
</div>
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="Zip">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{{< /example >}}
|
|
|
|
## Auto-sizing
|
|
|
|
The example below uses a flexbox utility to vertically center the contents and changes `.col` to `.col-auto` so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.
|
|
|
|
{{< example >}}
|
|
<form>
|
|
<div class="form-row align-items-center">
|
|
<div class="col-auto">
|
|
<label class="sr-only" for="autoSizingInput">Name</label>
|
|
<input type="text" class="form-control mb-2" id="autoSizingInput" placeholder="Jane Doe">
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="sr-only" for="autoSizingInputGroup">Username</label>
|
|
<div class="input-group mb-2">
|
|
<div class="input-group-prepend">
|
|
<div class="input-group-text">@</div>
|
|
</div>
|
|
<input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="sr-only" for="autoSizingSelect">Preference</label>
|
|
<select class="form-select mb-2" id="autoSizingSelect">
|
|
<option selected>Choose...</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="autoSizingCheck">
|
|
<label class="form-check-label" for="autoSizingCheck">
|
|
Remember me
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button type="submit" class="btn btn-primary mb-2">Submit</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{{< /example >}}
|
|
|
|
You can then remix that once again with size-specific column classes.
|
|
|
|
{{< example >}}
|
|
<form>
|
|
<div class="form-row align-items-center">
|
|
<div class="col-sm-3 my-1">
|
|
<label class="sr-only" for="specificSizeInputName">Name</label>
|
|
<input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
|
|
</div>
|
|
<div class="col-sm-3 my-1">
|
|
<label class="sr-only" for="specificSizeInputGroupUsername">Username</label>
|
|
<div class="input-group">
|
|
<div class="input-group-prepend">
|
|
<div class="input-group-text">@</div>
|
|
</div>
|
|
<input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3 my-1">
|
|
<label class="sr-only" for="specificSizeSelect">Preference</label>
|
|
<select class="form-select" id="specificSizeSelect">
|
|
<option selected>Choose...</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-auto my-1">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="autoSizingCheck2">
|
|
<label class="form-check-label" for="autoSizingCheck2">
|
|
Remember me
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto my-1">
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{{< /example >}}
|
|
|
|
## 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]({{< docsref "/utilities/spacing" >}}) and [flexbox]({{< docsref "/utilities/flex" >}}) 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]({{< docsref "/utilities/spacing" >}}) (as shown below). Lastly, be sure to always include a `<label>` with each form control, even if you need to hide it from non-screenreader visitors with `.sr-only`.
|
|
|
|
{{< example >}}
|
|
<form class="form-inline">
|
|
<label class="sr-only" for="inlineFormInputName">Name</label>
|
|
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName" placeholder="Jane Doe">
|
|
|
|
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
|
|
<div class="input-group mb-2 mr-sm-2">
|
|
<div class="input-group-prepend">
|
|
<div class="input-group-text">@</div>
|
|
</div>
|
|
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
|
|
</div>
|
|
|
|
<label class="sr-only" for="inlineFormSelectPref">Preference</label>
|
|
<select class="form-select mb-2 mr-sm-2" id="inlineFormSelectPref">
|
|
<option selected>Choose...</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
|
|
<div class="form-check mb-2 mr-sm-2">
|
|
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
|
|
<label class="form-check-label" for="inlineFormCheck">
|
|
Remember me
|
|
</label>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary mb-2">Submit</button>
|
|
</form>
|
|
{{< /example >}}
|
|
|
|
{{< callout warning >}}
|
|
### Alternatives to hidden labels
|
|
|
|
Assistive technologies such as screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria-labelledby` or `title` attribute. If none of these are present, assistive technologies may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labelling methods is not advised.
|
|
{{< /callout >}}
|