Form Elements

Form Controls

Textual form controls—like inputs, selects, and textares—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

A block of help text that breaks onto a new line and may extend beyond one line.

Basic Forms

Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.

We'll never share your email with anyone else.

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.

Checkboxes and Radios

Each checkbox and radio <input> and <label> pairing is wrapped in a <div> to create our custom control. Structurally, this is the same approach as our default .form-check.

Checkboxes
Inline Checkbox
Radios
Inline Radios

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

Input Sizing
Select Sizing

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.

Input Group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs

@

Inline Form

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 only appear inline in viewports that are at least 576px wide to account for narrow viewports on mobile devices.

Auto Sizing
@
2020 © Opatix.
Design & Develop by Myra