Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.
Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
Be sure to use an appropriate type attribute on all inputs (e.g.,
email for email address or number for numerical
information) to take advantage of newer input controls like email verification,
number selection, and more.
Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.
Block-level or inline-level form text can be created using
.form-text.
Form text should be explicitly associated with the form control it relates to
using the aria-describedby attribute. This will ensure that
assistive technologies—such as screen readers—will announce this form text
when the user focuses or enters the control.
Form text below inputs can be styled with .form-text. If a
block-level element will be used, a top margin is added for easy spacing from
the inputs above.
Your password must be 8-20 characters long, contain letters and numbers,
and must not contain spaces, special characters, or emoji.
Inline text can use any typical inline HTML element (be it a
<span>, <small>, or something else) with
nothing more than the .form-text class.
Must be 8-20 characters long.
Add the disabled boolean attribute on an input to prevent user
interactions and make it appear lighter.
Add the disabled attribute to a <fieldset> to
disable all the controls within.
By default, browsers will treat all native form controls
(<input>, <select>, and
<button> elements) inside a
<fieldset disabled> as disabled, preventing both keyboard and
mouse interactions on them. However, if your form also includes
<a ... class="btn btn-*"> elements, these will only be given
a style of pointer-events: none.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
| Name | Type | Default | Description |
|---|---|---|---|
tag |
String | 'button' |
Changes button tag |
| Name | Description | Example |
|---|---|---|
toggle |
Manually toggles a modal | myModal.toggle() |
| Name | Description |
|---|---|
show.bs.modal
|
This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. |