---

Form Control

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

Sizing

Set heights using classes like 

.form-control-lg

 and 

.form-control-sm

.

Select

Default

Custom 

<select>

 menus need only a custom class, 

.form-select

 to trigger the custom styles. Custom styles are limited to the 

<select>

 initial appearance and cannot modify the 

<option>

 due to browser limitations.

Checks and radios

Approach

Browser default checkboxes and radios are replaced with the help of 

.form-check

, a series of classes for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
Structurally, our 

<input>

s and 

<label>

s are sibling elements as opposed to an 

<input>

 within a 

<label>

. This is slightly more verbose as you must specify 

id

 and 

for

 attributes to

relate the 

<input>

 and 

<label>

. We use the sibling selector (

~

) for all our 

<input>

 states, like 

:checked

 or 

:disabled

. When combined with the 

.form-check-label

 class, we can

easily style the text for each item based on the 

<input>

as state.

Layout

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).

Column sizing

As shown in the previous examples, our grid system allows you to place any number of 

.col

s within a 

.row

. They all 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

.

---