Form Elements
Input Types
Most common form control, text-based input fields. Includes support for all HTML5 types: text
, password
, datetime
, datetime-local
, date
, month
, time
, week
, number
, email
, url
, search
, tel
, and color
.
Select Menu
Custom <select>
menus need only a custom class, .custom-select
to trigger the custom styles.
Switches
A switch has the markup of a custom checkbox but uses the .custom-switch
class to render a toggle switch. Switches also support the disabled
attribute.
Checkboxes and radios
Input Sizes & Group
Set heights using classes like .input-lg
, and set widths using grid column classes like .col-lg-*
.
Basic Example
Horizontal form
Inline Form
Add .form-inline
to your form (which doesn't have to be a <form>
)
for left-aligned and inline-block controls. This only applies to forms within viewports
that are at least 768px wide.
Auto-sizing
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.