Form / Controls

Text

<input type="text" class="form-control" placeholder="Text input">
    Copy

Password

<input type="password" class="form-control" placeholder="Password input">
    Copy

Datetime-local

<input type="datetime-local" class="form-control" placeholder="Datetime-local input">
    Copy

Date

<input type="date" class="form-control" placeholder="Date input">
    Copy

Month

<input type="month" class="form-control" placeholder="Month input">
    Copy

Time

<input type="time" class="form-control" placeholder="Time input">
    Copy

Week

<input type="week" class="form-control" placeholder="Week input">
    Copy

Number

<input type="number" class="form-control" placeholder="Number input">
    Copy

Email

<input type="email" class="form-control" placeholder="Email input">
    Copy

Url

<input type="url" class="form-control" placeholder="Url input">
    Copy

Search

<input type="search" class="form-control" placeholder="Search input">
    Copy

Tel

<input type="tel" class="form-control" placeholder="Tel input">
    Copy

Color

<input type="color" class="form-control" placeholder="Color input">
    Copy

Textarea

<textarea class="form-control" placeholder="Text area" rows="5"></textarea>
    Copy

Select

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
    Copy

Multiple select

<select class="form-control" multiple>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
    Copy

Static

email@example.com

<p class="form-control-static">email@example.com</p>
    Copy

Checkbox

<div class="checkbox">
  <label>
    <input type="checkbox" value="option1">
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" value="option2" checked>
  </label>
</div>
    Copy
<div class="checkbox">
  <label>
    <input type="checkbox" value="option1"> 1
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" value="option2" checked> 2
  </label>
</div>
    Copy
<label class="checkbox-inline">
  <input type="checkbox" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" value="option2" checked> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" value="option3"> 3
</label>
    Copy

Radio

<div class="radio">
  <label>
    <input type="radio" name="radios-1" value="option1" checked>
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="radios-1" value="option2">
  </label>
</div>
    Copy
<div class="radio">
  <label>
    <input type="radio" name="radios-2" value="option1" checked> 1
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="radios-2" value="option2"> 2
  </label>
</div>
    Copy
<label class="radio-inline">
  <input type="radio" name="radios-3" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="radios-3" value="option2" checked> 2
</label>
<label class="radio-inline">
  <input type="radio" name="radios-3" value="option3"> 3
</label>
    Copy

File

<input type="file">
    Copy

Sizes

<input type="text" class="form-control input-sm" placeholder="Text input">
<input type="color" class="form-control input-sm" placeholder="Color input">
<textarea class="form-control input-sm" placeholder="Text area" rows="5"></textarea>
<select class="form-control input-sm">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
    Copy
<input type="text" class="form-control input-lg" placeholder="Text input">
<input type="color" class="form-control input-lg" placeholder="Color input">
<textarea class="form-control input-lg" placeholder="Text area" rows="5"></textarea>
<select class="form-control input-lg">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
    Copy

Disabled

<input type="text" class="form-control" placeholder="Text input" disabled>
<input type="password" class="form-control" placeholder="Password input" disabled>
<input type="datetime-local" class="form-control" placeholder="Datetime-local input" disabled>
<input type="date" class="form-control" placeholder="Date input" disabled>
<input type="month" class="form-control" placeholder="Month input" disabled>
<input type="time" class="form-control" placeholder="Time input" disabled>
<input type="week" class="form-control" placeholder="Week input" disabled>
<input type="number" class="form-control" placeholder="Number input" disabled>
<input type="email" class="form-control" placeholder="Email input" disabled>
<input type="url" class="form-control" placeholder="Url input" disabled>
<input type="search" class="form-control" placeholder="Search input" disabled>
<input type="tel" class="form-control" placeholder="Tel input" disabled>
<input type="color" class="form-control" placeholder="Color input" disabled>
<textarea class="form-control" placeholder="Text area" rows="5" disabled></textarea>
<select class="form-control" disabled>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
<select class="form-control" multiple disabled>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
<input type="file" class="form-control-file" disabled>
    Copy
<div class="checkbox">
  <label>
    <input type="checkbox" value="option1" disabled>
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" value="option2" checked disabled>
  </label>
</div>

<hr>

<div class="checkbox">
  <label>
    <input type="checkbox" value="option1" disabled> 1
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" value="option2" checked disabled> 2
  </label>
</div>

<hr>

<label class="checkbox-inline">
  <input type="checkbox" value="option1" disabled> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" value="option2" checked disabled> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" value="option3" disabled> 3
</label>
    Copy
<div class="radio">
  <label>
    <input type="radio" name="radios-4" value="option1" checked disabled>
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="radios-4" value="option2" disabled>
  </label>
</div>

<hr>

<div class="radio">
  <label>
    <input type="radio" name="radios-5" value="option1" checked disabled> 1
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="radios-5" value="option2" disabled> 2
  </label>
</div>

<hr>

<label class="radio-inline">
  <input type="radio" name="radios-6" value="option1" disabled> 1
</label>
<label class="radio-inline">
  <input type="radio" name="radios-6" value="option2" checked disabled> 2
</label>
<label class="radio-inline">
  <input type="radio" name="radios-6" value="option3" disabled> 3
</label>
    Copy

Readonly

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
    Copy
SETTINGS
THEMES