Forms
Advanced options
Check Bootstrap for more advanced options
Form example demo
Vertical
Inline
Show code
<form>
<div class="form-group">
<select class="form-control custom-select" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<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-check">
<label class="form-check-label" for="exampleCheck1">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Addons input
Show code
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button" id="button-addon2a">Button</button>
</div>
</div>
Checkbox
Show code
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
Disabled checkbox
</label>
</div>
Datetime: datepicker
This component requires including css/flatpickr.min.css and js/flatpickr.min.js in the appropriate places in your page source. For more complex functionality see Flatpickr documenta
Show code
<div class="form-group">
<label>Default Functionality</label>
<div class="form-container-width">
<div class="input-group">
<div class="input-group" id="dateWrapper">
<input type="text" class="form-control" placeholder="yyyy-mm-dd" id="datepicker"
data-input>
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-calendar"></i>
</button>
</div>
</div>
</div>
<script type="text/javascript">
$('#dateWrapper').flatpickr({ wrap: true });
</script>
</div>
</div>
<div class="form-group">
<label>Date format</label>
<div class="form-container-width">
<div class="input-group" id="datepickerFormat">
<input type="text" class="form-control" placeholder="yyyy/mm/dd" data-input>
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-calendar"></i>
</button>
</div>
</div>
</div>
<script type="text/javascript">
$('#datepickerFormat').flatpickr({
wrap: true,
dateFormat: 'Y/m/d'
});
</script>
</div>
<div class="form-group">
<label>Multiple Dates</label>
<div class="form-container-width">
<div class="input-group" id="datepicker-multiple-date">
<input type="text" class="form-control" placeholder="yyyy-mm-dd" data-input>
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-calendar"></i>
</button>
</div>
</div>
<script type="text/javascript">
$('#datepicker-multiple-date').flatpickr({
wrap: true,
mode: 'multiple'
});
</script>
</div>
</div>
<div class="form-group">
<label>Date Range</label>
<div class="form-container-width">
<div class="input-group" id="date-range">
<input type="text" class="form-control" placeholder="yyyy-mm-dd to yyyy-mm-dd"
data-input>
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-calendar"></i>
</button>
</div>
</div>
<script type="text/javascript">
$('#date-range').flatpickr({
wrap: true,
mode: 'range'
});
</script>
</div>
</div>
Datetime timepicker
This component requires including css/flatpickr.min.css and js/flatpickr.min.js in the appropriate places in your page source. For more complex functionality see Flatpickr documenta
Show code
<div class="form-group">
<label>Default Functionality</label>
<div class="form-container-width" id="basicWrapper">
<div id="basicTimepciker" class="input-group col-sm-4">
<input type="text" class="form-control" placeholder="hh:mm" data-input>
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-clock-o"></i>
</button>
</div>
</div>
<script type="text/javascript">
$("#basicTimepciker").flatpickr({
wrap: true,
enableTime: true,
noCalendar: true,
time_24hr: true
});
</script>
</div>
</div>
<div class="form-group">
<label>TimeFormat</label>
<div class="form-container-width">
<div id="timePicker-format" class="input-group col-sm-4">
<input type="text" class="form-control" data-input />
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-clock-o"></i>
</button>
</div>
</div>
<script type="text/javascript">
$("#timePicker-format").flatpickr({
wrap: true,
enableTime: true,
noCalendar: true,
dateFormat: "H:i K",
time_24hr: false
});
</script>
</div>
</div>
Datetime datepairer
This component requires including css/flatpickr.min.css and js/flatpickr.min.js in the appropriate places in your page source. For more complex functionality see Flatpickr documenta
Show code
<div class="form-group">
<label>Compare Date</label>
<div class="form-container-width">
<div id="datepair" class="row">
<div class="col-sm-6">
<div class="input-group" id="datepairStart">
<input type="text" class="form-control" placeholder="start date" data-input>
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-clock-o"></i>
</button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="input-group" id="datepairEnd">
<input type="text" provide="datepicker" class="form-control"
placeholder="end date" data-input>
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-clock-o"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var startPicker = $("#datepairStart").flatpickr({
wrap: true,
onChange: function (dateObj, dateStr) {
var endDate = endPicker.selectedDates[0];
if (endDate < dateObj[0]) {
endPicker.setDate(dateStr, true);
}
}
});
var endPicker = $("#datepairEnd").flatpickr({
wrap: true,
onChange: function (dateObj, dateStr) {
var startDate = startPicker.selectedDates[0];
if (startDate > dateObj[0]) {
startPicker.setDate(dateStr, true);
}
}
});
</script>
</div>
<div class="form-group">
<label>Compare Time</label>
<div class="form-container-width">
<div id="timepair" class="row">
<div id="timepairStart" class="input-group col-sm-4">
<input type="text" class="form-control" placeholder="start time" data-input>
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-clock-o"></i>
</button>
</div>
</div>
<div id="timepairEnd" class="input-group col-sm-4">
<input type="text" class="form-control" placeholder="end time" data-input>
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-clock-o"></i>
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var startPicker = $("#timepairStart").flatpickr({
wrap: true,
enableTime: true,
noCalendar: true,
time_24hr: true,
onChange: function (dateObj, dateStr) {
var endDate = endPicker.selectedDates[0];
if (endDate < dateObj[0]) {
endPicker.setDate(dateStr, true);
}
}
});
var endPicker = $("#timepairEnd").flatpickr({
wrap: true,
enableTime: true,
noCalendar: true,
time_24hr: true,
onChange: function (dateObj, dateStr) {
var startDate = startPicker.selectedDates[0];
if (startDate > dateObj[0]) {
startPicker.setDate(dateStr, true);
}
}
});
</script>
</div>
File input
Show code
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01"
aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
</div>
Input text
Show code
<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">Form-text</small>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
Radio
Show code
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1"
value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2"
value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3"
value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
Range
Show code
<form>
<div class="form-group">
<label for="formControlRange">Example Range input</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
</form>
Select
Show code
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
Switch
Show code
<div class="custom-control custom-switch custom-switch-blue">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">I am primary</label>
</div>
<div class="custom-control custom-switch custom-switch-green">
<input type="checkbox" class="custom-control-input" id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">I am success</label>
</div>
<div class="custom-control custom-switch custom-switch-blue">
<input type="checkbox" disabled class="custom-control-input" id="customSwitch1b">
<label class="custom-control-label" for="customSwitch1b">I am disabled</label>
</div>
<div class="custom-control custom-switch custom-switch-blue">
<input type="checkbox" checked class="custom-control-input" id="customSwitch1a">
<label class="custom-control-label" for="customSwitch1a">I am primary
checked</label>
</div>
<div class="custom-control custom-switch custom-switch-green">
<input type="checkbox" checked class="custom-control-input" id="customSwitch2a">
<label class="custom-control-label" for="customSwitch2a">I am success
checked</label>
</div>
<div class="custom-control custom-switch custom-switch-blue">
<input type="checkbox" checked disabled class="custom-control-input" id="customSwitch1b">
<label class="custom-control-label" for="customSwitch1b">I am checked and
disabled</label>
</div>
v1.0.811-rev-07dbbad
