#### Basic Elements

#### Textual inputs

Here are examples of `.form-control` applied to each textual HTML5 `<input>` `type`.

Text
Search
Email
URL
Telephone
Password
Number
Date and time
Date
Month
Week
Time
Color picker
Select
Datalists

#### Sizing

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

Default input
Form Small input
Form Large input

#### Range Inputs

Create custom `<input type="range">` controls with `.form-range`.

Example range

##### Min and max

Range inputs have implicit values for min and max—0 and 100, respectively.

##### Steps

By default, range inputs “snap” to integer values. To change this, you can specify a `step` value.

#### Form layouts

Form layout options : from inline, horizontal & custom grid implementations

##### Form groups

First name
Email
Password
Check me out

##### Horizontal form

First name
Email
Password
Remember me

##### Inline forms layout

Name
Username
@
Remember me

##### Floating Label

Email address
Password

##### Inline forms layout used by hstack

#### Checkboxes

##### Form Checkboxes

Form Checkbox
Form Checkbox checked

##### Form Checkboxes Right

Form Checkbox Right
Form Checkbox Right checked

#### Radios

##### Form Radios

Form Radio
Form Radio checked

##### Form Radios Right

Form Radio Right
Form Radio Right checked

#### Switches

A switch has the markup of a custom checkbox but uses the `.form-switch` class to render a toggle switch. Switches also support the `disabled` attribute.

##### Switch examples

Toggle this switch element
Disabled switch element

##### Switch sizes

Small Size Switch
Medium Size Switch
Large Size Switch

##### Theme Customizer

###### Layout

Vertical
Horizontal

###### Layout Mode

Light
Dark

###### Layout Width

Fluid
Boxed

###### Layout Position

Fixed
Scrollable

###### Topbar Color

Light
Dark

###### Sidebar Size

###### Sidebar Color

###### Direction

LTR
RTL