mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-04 16:24:22 +01:00
00ff5b83f9
- in particular, controls that just relied on `placeholder`, as this is still not officially/consistently supported as a valid way to provide an accessible name (though some browsers do use it as a fallback)
347 lines
14 KiB
Markdown
347 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 >}}
|
|
<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>
|
|
{{< /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 >}}
|
|
<div class="row">
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
|
|
</div>
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
|
|
</div>
|
|
</div>
|
|
{{< /example >}}
|
|
|
|
## Gutters
|
|
|
|
By adding [gutter modifier classes]({{< docsref "/layout/grid#gutters" >}}), you can have control over the gutter width in as well the inline as block direction. **Also requires the `$enable-grid-classes` Sass variable to be enabled** (on by default).
|
|
|
|
{{< example >}}
|
|
<div class="row g-3">
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
|
|
</div>
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
|
|
</div>
|
|
</div>
|
|
{{< /example >}}
|
|
|
|
More complex layouts can also be created with the grid system.
|
|
|
|
{{< example >}}
|
|
<form class="row g-3">
|
|
<div class="col-md-6">
|
|
<label for="inputEmail4">Email</label>
|
|
<input type="email" class="form-control" id="inputEmail4">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="inputPassword4">Password</label>
|
|
<input type="password" class="form-control" id="inputPassword4">
|
|
</div>
|
|
<div class="col-12">
|
|
<label for="inputAddress">Address</label>
|
|
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
|
|
</div>
|
|
<div class="col-12">
|
|
<label for="inputAddress2">Address 2</label>
|
|
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="inputCity">City</label>
|
|
<input type="text" class="form-control" id="inputCity">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="inputState">State</label>
|
|
<select id="inputState" class="form-select">
|
|
<option selected>Choose...</option>
|
|
<option>...</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label for="inputZip">Zip</label>
|
|
<input type="text" class="form-control" id="inputZip">
|
|
</div>
|
|
<div class="col-12">
|
|
<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>
|
|
<div class="col-12">
|
|
<button type="submit" class="btn btn-primary">Sign in</button>
|
|
</div>
|
|
</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="row mb-3">
|
|
<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="row mb-3">
|
|
<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>
|
|
<div class="row mb-3">
|
|
<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="row mb-3">
|
|
<div class="col-form-label col-sm-2 pt-0">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>
|
|
<button type="submit" class="btn btn-primary">Sign in</button>
|
|
</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 >}}
|
|
<div class="row mb-3">
|
|
<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="row mb-3">
|
|
<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="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>
|
|
{{< /example >}}
|
|
|
|
## Column sizing
|
|
|
|
As shown in the previous examples, our grid system allows you to place any number of `.col`s within a `.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-sm-7`.
|
|
|
|
{{< example >}}
|
|
<div class="row g-3">
|
|
<div class="col-sm-7">
|
|
<input type="text" class="form-control" placeholder="City" aria-label="City">
|
|
</div>
|
|
<div class="col-sm">
|
|
<input type="text" class="form-control" placeholder="State" aria-label="State">
|
|
</div>
|
|
<div class="col-sm">
|
|
<input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
|
|
</div>
|
|
</div>
|
|
{{< /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 class="row gy-2 gx-3 align-items-center">
|
|
<div class="col-auto">
|
|
<label class="sr-only" for="autoSizingInput">Name</label>
|
|
<input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="sr-only" for="autoSizingInputGroup">Username</label>
|
|
<div class="input-group">
|
|
<div class="input-group-text">@</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" 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">
|
|
<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">Submit</button>
|
|
</div>
|
|
</form>
|
|
{{< /example >}}
|
|
|
|
You can then remix that once again with size-specific column classes.
|
|
|
|
{{< example >}}
|
|
<form class="row gx-3 gy-2 align-items-center">
|
|
<div class="col-sm-3">
|
|
<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">
|
|
<label class="sr-only" for="specificSizeInputGroupUsername">Username</label>
|
|
<div class="input-group">
|
|
<div class="input-group-text">@</div>
|
|
<input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<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">
|
|
<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">
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</form>
|
|
{{< /example >}}
|
|
|
|
## Inline forms
|
|
|
|
Use the `.col-auto` class to create horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/grid#gutters" >}}), we'll have gutters in horizontal and vertical directions. The `.align-items-center` aligns the form elements to the middle, making the `.form-checkbox` align properly.
|
|
|
|
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="row row-cols-md-auto g-3 align-items-center">
|
|
<div class="col-12">
|
|
<label class="sr-only" for="inlineFormInputName">Name</label>
|
|
<input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
|
|
<div class="input-group">
|
|
<div class="input-group-text">@</div>
|
|
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<label class="sr-only" for="inlineFormSelectPref">Preference</label>
|
|
<select class="form-select" id="inlineFormSelectPref">
|
|
<option selected>Choose...</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
|
|
<label class="form-check-label" for="inlineFormCheck">
|
|
Remember me
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</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 labeling methods is not advised.
|
|
{{< /callout >}}
|