Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Overview
<form><divclass="mb-3"><labelfor="exampleInputEmail1"class="form-label">Email address</label><inputtype="email"class="form-control"id="exampleInputEmail1"aria-describedby="emailHelp"><divid="emailHelp"class="form-text">We'll never share your email with anyone else.</div></div><divclass="mb-3"><labelfor="exampleInputPassword1"class="form-label">Password</label><inputtype="password"class="form-control"id="exampleInputPassword1"></div><divclass="mb-3 form-check"><inputtype="checkbox"class="form-check-input"id="exampleCheck1"><labelclass="form-check-label"for="exampleCheck1">Check me out</label></div><buttontype="submit"class="btn btn-primary">Submit</button></form>
Form text
Block-level or inline-level form text can be created using .form-text.
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.
<labelfor="inputPassword5"class="form-label">Password</label><inputtype="password"id="inputPassword5"class="form-control"aria-describedby="passwordHelpBlock"><divid="passwordHelpBlock"class="form-text">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>
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.
<divclass="row g-3 align-items-center"><divclass="col-auto"><labelfor="inputPassword6"class="col-form-label">Password</label></div><divclass="col-auto"><inputtype="password"id="inputPassword6"class="form-control"aria-describedby="passwordHelpInline"></div><divclass="col-auto"><spanid="passwordHelpInline"class="form-text">
Must be 8-20 characters long.
</span></div></div>
Disabled forms
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. Browsers 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 custom button-like elements such as <a class="btn btn-*">...</a>, these will only be given a style of pointer-events: none, meaning they are still focusable and operable using the keyboard. In this case, you must manually modify these controls by adding tabindex="-1" to prevent them from receiving focus and aria-disabled="disabled" to signal their state to assistive technologies.