<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<!-- small -->
<input type="text" class="form-control form-control-sm" placeholder="">
<!-- medium -->
<input type="text" class="form-control" placeholder="">
<!-- large -->
<input type="text" class="form-control form-control-lg" placeholder="">
<!-- valid -->
<input type="text" class="form-control is-valid" placeholder="">
<!-- invalid -->
<input type="text" class="form-control is-invalid" placeholder="">
<input type="text" class="form-control form-control-clean" placeholder="">
<!--
Note: pay attention to placeholder and label
The text should be the same!
-->
<!-- regular : input -->
<div class="form-label-group mb-3">
<input placeholder="First Name" id="first_name" type="text" value="" class="form-control">
<label for="first_name">First Name</label>
</div>
<!-- clean : input -->
<div class="form-label-group mb-3">
<input placeholder="Last Name" id="last_name" type="text" value="" class="form-control form-control-clean">
<label for="last_name">Last Name</label>
</div>
<!-- textarea -->
<div class="form-label-group mb-3">
<textarea placeholder="Textarea" id="description" class="form-control" rows="3"></textarea>
<label for="description">Textarea</label>
</div>
<!-- select : bootstrap select vendor -->
<div class="form-label-group mb-3">
<select id="select_options" class="form-control bs-select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label for="select_options">Bootstrap Select Vendor</label>
</div>
<!-- select : regular -->
<div class="form-label-group mb-3">
<select id="select_options2" class="form-control">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label for="select_options2">Regular Select</label>
</div>
<!--
Change any *.primary to:
.form-checkbox-primary .form-radio-primary
.form-checkbox-secondary .form-radio-secondary
.form-checkbox-success .form-radio-success
.form-checkbox-danger .form-radio-danger
.form-checkbox-warning .form-radio-warning
.form-checkbox-pink .form-radio-pink
.form-checkbox-indigo .form-radio-indigo
.form-checkbox-purple .form-radio-purple
Color bordered:
.form-checkbox-bordered .form-radio-bordered
No special class for disabled - use `<input disabled` , like usual.
* text is wrapped inside <span> so form validation be able to add red color!
-->
<!-- Checkbox -->
<label class="form-checkbox form-checkbox-primary">
<input type="checkbox" name="checkbox" checked>
<i></i> <span>Primary</span>
</label>
<!-- Checkbox : Bordered -->
<label class="form-checkbox form-checkbox-primary form-checkbox-bordered">
<input type="checkbox" name="checkbox">
<i></i> <span>Primary</span>
</label>
<!-- Radio -->
<label class="form-radio form-radio-primary">
<input type="radio" name="radio" checked>
<i></i> <span>Primary</span>
</label>
<!-- Radio : Bordered -->
<label class="form-radio form-radio-primary form-radio-bordered">
<input type="radio" name="radio">
<i></i> <span>Primary</span>
</label>
<!--
Change any *.primary to:
.form-switch-primary
.form-switch-secondary
.form-switch-success
.form-switch-danger
.form-switch-warning
.form-switch-pink
.form-switch-indigo
.form-switch-purple
No special class for disabled - use `<input disabled` , like usual.
* text is wrapped inside <span> so form validation be able to add red color!
-->
<!-- Switch : Checkbox : Pill -->
<label class="form-switch form-switch-pill form-switch-primary d-block">
<input type="checkbox" value="1" checked="">
<i data-on="✔" data-off="✕"></i>
<span>Primary</span>
</label>
<!-- Switch : Checkbox : Squared -->
<label class="form-switch form-switch-primary d-block">
<input type="checkbox" value="1" checked="">
<i data-on="✔" data-off="✕"></i>
<span>Primary</span>
</label>
<!-- Switch : Radio : Pill -->
<label class="form-switch form-switch-pill form-switch-primary d-block">
<input type="radio" value="1" checked="">
<i data-on="✔" data-off="✕"></i>
<span>Primary</span>
</label>
<!-- Switch : Radio : Squared -->
<label class="form-switch form-switch-primary d-block">
<input type="radio" name="--" value="1" checked="">
<i data-on="✔" data-off="✕"></i>
<span>Primary</span>
</label>
<!--
Add to any label: .rounded-circle
for circle layout
Both type working: checkbox & radio
-->
<!-- size/etc example -->
<label class="form-selector">
<input type="checkbox" name="checkbox">
<span>XL</span>
</label>
<!-- size/etc : lg -->
<label class="form-selector form-selector-lg">
<input type="checkbox" name="checkbox">
<span>XL</span>
</label>
<!-- color -->
<label class="form-selector">
<input type="checkbox" name="checkbox">
<i class="bg-primary"></i>
</label>
<!-- color : lg -->
<label class="form-selector form-selector-lg">
<input type="checkbox" name="checkbox">
<i class="bg-primary"></i>
</label>
<!-- image : squared -->
<label class="form-selector form-selector-xl">
<input type="radio" name="radio_selector">
<i class="bg-cover" style="background-image:url('demo.files/images/unsplash/products/thumb_330/imani-clovis-LxVxPA1LOVM-unsplash-min.jpg')"></i>
</label>
<!--
Available classes:
.custom-file-primary
.custom-file-secondary
.custom-file-danger
.custom-file-warning
.custom-file-info
.custom-file-dark
.custom-file-purple
.custom-file-indigo
.custom-file-pink
-->
<div class="input-group mb-3">
<div class="custom-file custom-file-primary">
<input name="file_input_name" type="file" class="custom-file-input" id="inputGroupFile01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
</div>
<!-- disabled example -->
<div class="input-group mb-3">
<div class="custom-file custom-file-primary">
<input disabled name="file_input_name" type="file" class="custom-file-input" id="inputGroupFile10">
<label class="custom-file-label disabled" for="inputGroupFile10">Choose file</label>
</div>
</div>
<!-- small example -->
<div class="input-group mb-3">
<div class="custom-file custom-file-sm custom-file-primary">
<input name="file_input_name" type="file" class="custom-file-input" id="inputGroupFile11">
<label class="custom-file-label" for="inputGroupFile11">Choose file</label>
</div>
</div>