### Forms

###### THIS MONTH

#### $58,356

###### LAST MONTH

#### $48,356

#### Basic Material inputs

###### Just add `form-material` class to the form that's it.

Default Text e.g. "George deo"
Email e.g. "example@gmail.com"
Password
Placeholder
Text area
Input Select
File upload
Select file Change Remove
Helping text A block of help text that breaks onto a new line and may extend beyond one line.

#### Different Widths

###### Just add `col*` class to form-group

Select file Change Remove
Text area

#### Basic Examples

Default Filled In Default - Disabled Filled In - Disabled

#### With Material Design Colors

Red Pink Purple Deep Purple Indigo Blue Light Blue Cyan Teal Green Light Green Lime Yellow Amber Orange Deep Orange Brown Grey Blue Grey Black

#### With Material Design Colors - Filled In

Red Pink Purple Deep Purple Indigo Blue Light Blue Cyan Teal Green Light green Lime Yellow Amber Orange Deep Orange Brown Grey Blue Grey Black

#### Basic Radio button Examples

Radio - 1 Radio - 2 Radio - With Gap Radio - With Gap Radio - Disabled Radio - Disabled

#### With Material Design Colors
You can use material design colors which examples are `.radio-col-pink, .radio-col-cyan` class

Red Pink Purple Deep Purple Indigo Blue Light Blue Cyan Teal Green Light Green Lime Yellow Amber Orange Deep Orange Brown Grey Blue Grey Black

#### With Material Design Colors - With Gap
Add to `.with-gap` class

Red Pink Purple Deep Purple Indigo Blue LIight Blue Cyan Teal Green Light GREEN Lime Yellow Amber Orange Deep Orange Brown Grey Blue Grey Black

#### Switch Button

OFF ON
DISABLED

#### With Different Colors

RED
PINK
PURPLE
DEEP PURPLE
INDIGO
BLUE
LIGHT BLUE
CYAN
TEAL
GREEN
LIGHT GREEN
LIME
YELLOW
AMBER
ORANGE
DEEP ORANGE
BROWN
GREY
BLUE GREY
BLACK

#### Default Basic Forms

###### All bootstrap element classies

    <div class="form-group row">
      <label for="example-text-input" class="col-2 col-form-label">Text</label>
      <div class="col-10">
        <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
      </div>
    </div>
    <div class="form-group row">
      <label for="example-search-input" class="col-2 col-form-label">Search</label>
      <div class="col-10">
        <input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
      </div>
    </div>
    <div class="form-group row">
      <label for="example-email-input" class="col-2 col-form-label">Email</label>
      <div class="col-10">
        <input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
      </div>
    </div>
    <div class="form-group row">
      <label for="example-url-input" class="col-2 col-form-label">URL</label>
      <div class="col-10">
        <input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
      </div>
    </div>
    <div class="form-group row">
      <label for="example-tel-input" class="col-2 col-form-label">Telephone</label>
      <div class="col-10">
        <input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
      </div>
    </div>
    <div class="form-group row">
      <label for="example-password-input" class="col-2 col-form-label">Password</label>
      <div class="col-10">
        <input class="form-control" type="password" value="hunter2" id="example-password-input">
      </div>
    </div>
    <div class="form-group row">
      <label for="example-number-input" class="col-2 col-form-label">Number</label>
      <div class="col-10">
        <input class="form-control" type="number" value="42" id="example-number-input">
      </div>
    </div>
    <div class="form-group row">
      <label for="example-datetime-local-input" class="col-2 col-form-label">Date and time</label>
      <div class="col-10">
        <input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
      </div>
    </div>
    <div class="form-group row">
      <label for="example-date-input" class="col-2 col-form-label">Date</label>
      <div class="col-10">
        <input class="form-control" type="date" value="2011-08-19" id="example-date-input">
      </div>
    </div>
    <div class="form-group row">
      <label for="example-month-input" class="col-2 col-form-label">Month</label>
      <div class="col-10">
        <input class="form-control" type="month" value="2011-08" id="example-month-input">
      </div>
    </div>
    <div class="form-group row">
      <label for="example-week-input" class="col-2 col-form-label">Week</label>
      <div class="col-10">
        <input class="form-control" type="week" value="2011-W33" id="example-week-input">
      </div>
    </div>
    <div class="form-group row">
      <label for="example-time-input" class="col-2 col-form-label">Time</label>
      <div class="col-10">
        <input class="form-control" type="time" value="13:45:00" id="example-time-input">
      </div>
    </div>
    <div class="form-group row">
      <label for="example-color-input" class="col-2 col-form-label">Color</label>
      <div class="col-10">
        <input class="form-control" type="color" value="#563d7c" id="example-color-input">
      </div>
    </div>

Text
Search
Email
URL
Telephone
Password
Number
Date and time
Date
Month
Week
Time
Select
Color
Input Range

#### Default Horizontal Forms

###### All bootstrap element classies

Default Text e.g. "George deo"
Email e.g. "example@gmail.com"
Password
Placeholder
Text area
Read only input
Disabled input
Check this custom checkbox
Check this custom checkbox
Check this custom checkbox
Toggle this custom radio
Or toggle this other custom radio
Input Select
Default file upload
Custom File upload
Select file Change Remove
Helping text A block of help text that breaks onto a new line and may extend beyond one line.

#### Custom File Uploads with different languages

Choose file
Seleccionar Archivo
Voeg je document toe
Upload
Choose file
Choose file
Upload
Choose file
Choose file

#### Input groups

###### All bootstrap element classies

@
@example.com
Your vanity URL
https://example.com/users/
$
.00
$
0.00
Checkboxes and radio addons
Multiple addons
0.00
$
0.00
Button addons
Multiple addons

### Input States

Validation styles for error, warning, and success states on form controls.

Input with success
Success! You've done it.
Example help text that remains unchanged.
Input with warning
Shucks, check the formatting of that and try again.
Example help text that remains unchanged.
Input with danger
Sorry, that username's taken. Try another?
Example help text that remains unchanged.
Email
Success! You've done it.
Example help text that remains unchanged.
Email
Shucks, check the formatting of that and try again.
Example help text that remains unchanged.
Email
Sorry, that username's taken. Try another?
Example help text that remains unchanged.
Small
Normal
Large
Grid Sizes

### Sample Basic Forms

Bootstrap Elements

User Name
Email address
Password
Password
Remember me

### Sample Horizontal form

Use Bootstrap's predefined grid classes for horizontal form

Username*
Email*
Website
Password*
Re Password*
Check me out !