#### Basic Elements

##### Input types

##### Text

###### Usage `type="text"`

##### Email

###### Usage `type="email"`

##### Password

###### Usage `type="password"`

##### Number

###### Usage `type="number"`

##### Search

###### Usage `type="search"`

##### URL

###### Usage `type="url"`

##### Tel

###### Usage `type="tel"`

##### File

###### Usage `type="file"`

##### Date & Time

###### Usage `type="datetime-local"`

##### Date

###### Usage `type="date"`

##### Time

###### Usage `type="time"`

##### Week

###### Usage `type="week"`

##### Month

###### Usage `type="month"`

##### Range

###### Usage `type="range"`

##### Color

###### Usage `type="color"`

##### Input type Properties

##### Placeholder text

###### Usage `placeholder="....."`

##### Readonly

###### Usage `readonly`

##### Disabled

###### Usage `disabled`

##### Static Value

###### Usage `.form-control-plaintext`

##### Default Value

###### Usage `value="....."`

##### Min Value

###### Usage `minLength="....."`

##### Max Value

###### Usage `maxLength="....."`

##### Helper text

###### Usage `.form-text`

Helper Text

##### Textarea

###### Usage `textarea`

##### Select

##### Default Select

###### Usage `select`

##### Multiple Select

###### Usage `multiple`

##### Input type with different sizes

##### Default Size

###### Usage `.form-control-md`

##### Small Size

###### Usage `.form-control-sm`

##### Large Size

###### Usage `.form-control-lg`

##### Grid Sizes

###### Usage `.col-sm-4`

Grid Sizes

##### Custom Range

##### Default Range

###### Create custom `<input type="range">` controls with `.custom-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers.

##### Min Max Range

###### Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.

##### Steps Range

###### By default, range inputs “snap” to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`.

##### Checkboxe

##### Default Checkbox

###### By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.

Default checkbox
Disabled checkbox

##### Custom Checkbox

###### Each checkbox and radio is wrapped in a `<div>` with a sibling `<span>` to create our custom control and a `<label>` for the accompanying text. Structurally, this is the same approach as our default `.form-check`.

Check this custom checkbox
Disable custom checkbox

##### Inline Checkbox

###### Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.

1
2
3 (disabled)

##### Custom Inline Checkbox

###### Group checkboxes or radios on the same horizontal row by adding `.custom-control-inline`.

1
2
3 (disabled)

##### Custom Color Checkbox

##### Radios

##### Default Radios

###### By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.

Default radio
Second default radio
Disabled radio

##### Custom Radios

###### Each checkbox and radio is wrapped in a `<div>` with a sibling `<span>` to create our custom control and a `<label>` for the accompanying text. Structurally, this is the same approach as our default `.form-check`.

Toggle this custom radio
Or toggle this other custom radio
Disabled custom radio

##### Inline Radios

###### Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.

1
2
3 (disabled)

##### Custom Inline Radios

###### Group checkboxes or radios on the same horizontal row by adding `.custom-control-inline`.

1
2
3

##### Custom Color Radio

##### Switches

##### Custom 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.

Toggle this switch element
Disabled switch element