Input
Bootstrap’s form controls expand on our rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
Use different types of class with
.form-control class which contains
input field.
Find input style options below:
| Input style options | Class | Description |
|---|---|---|
| Rounded Input | .round |
Use this class for round styled input. |
| Square Input | .square |
Use this class for square styled input. |
| Horizontal Input | .col-form-label |
To make label vertically centered of
form-control, use
.col-form-label class with
<label> tag.
|
| Custom File Input |
.custom-file .custom-file-input
|
For Custom File Input, use
.custom-file-input class
within .custom-file class.
|
| Input with Icons |
.has-icon-{left | right}
|
To put left | right aligned icons inside
your input, use this class with
form-group. Also add
.form-control-position as a
sibling of <input> tag.
|
| Input Sizing |
.form-control.form-control-[sm |
lg]
|
Use these classes for different input sizing. |
| Input Validation states |
.{is-valid | is-invalid}
|
For indicating valid | invalid form
fields, use this class with
.form-control. Use
.{valid | invalid}-feedback
as a sibling of
<input> tag for
validation feedback.
|
| Input Validation with Tooltips |
.{valid | invalid}-tooltip
|
Use .needs-validation class
with <form> tag,
.{valid | invalid}-tooltip
classes to display validation feedback in
a styled tooltip.
|
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://getbootstrap.com/docs/4.4/components/forms/ |
| Template Page | https://demos.pixinvent.com/apex-html-admin-template/demo-1/form-inputs.html |
Input Group
Form Input Group options with different classes and advance options.
| Inout Group Options | Class | Description |
|---|---|---|
| Simple Input Group | .input-group |
Use this class for input-group. Inside
.input-group class, add
.input-group-{prepend | append}
class and it's sibling would be
input tag.
|
| Different Sizes | .input-group-{sm | lg} |
Add this class to
.input-group for small/large
append/prepend.
|
| With Buttons | - |
Add a <button> tag
inside
.input-group-{prepend | append}
class.
|
| With Dropdown | .dropdown-toggle |
Add <button> with
.dropdown-toggle class and
add dropdown-menu after it to get input
group with dropdown.
|
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://getbootstrap.com/docs/4.4/components/input-group/ |
| Template Page | https://demos.pixinvent.com/apex-html-admin-template/demo-1/form-input-groups.html |
Checkbox
Form checkbox options with different classes and advance options.
Some checkbox options below that can be used:
| Checkbox Options | Class | Description |
|---|---|---|
| Default Checkboxes | .checkbox |
Add .checkbox as a single
wrapper and inside this wrapper, add
<label> with
for attribute &
<input> tag to get
better output. id attribute
of this input and
for attribute of the label
must be same.
|
| Checkbox with Colors |
.checkbox.checkbox-{colorName}
|
Use this class to change the color of the checkboxes. |
| Custom Checkbox |
.custom-control.custom-checkbox
|
Add this class as a single wrapper and
inside this wrapper, add
.custom-control-label as a
sibling of
input.custom-control-input
for better output.
id attribute of this input
and for attribute of the
label must be same.
|
| Checkbox Size | .checkbox.checkbox-sm |
Use this class for small checkbox. |
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://getbootstrap.com/docs/4.4/components/input-group/#checkboxes-and-radios |
| Template Page | https://demos.pixinvent.com/apex-html-admin-template/demo-1/form-checkbox.html |
Radio
Radio makes itself different from checkbox by
having name attribute (of the same
categorized radio inputs) same.
Form radio options with different classes and advance options.
Some radio options below that can be used:
| Radio Options | Class | Description |
|---|---|---|
| Default Radio Buttons | .radio |
Add .radio as a single
wrapper and inside this wrapper, add
<label> with
for attribute &
<input> tag to get
better output. id attribute
of this input and
for attribute of the label
must be same.
|
| Colored Radio Buttons |
.radio.radio-{colorName}
|
Use this class to change the color of the radio buttons. |
| Custom Radio Buttons |
.custom-control.custom-radio
|
Add this class as a single wrapper and
inside this wrapper, add
.custom-control-label as a
sibling of
input.custom-control-input
for better output.
id attribute of this input
and for attribute of the
label must be same.
|
| Radio Size | .radio.radio-sm |
Use this class for small radio buttons. |
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://getbootstrap.com/docs/4.4/components/input-group/#checkboxes-and-radios |
| Template Page | https://demos.pixinvent.com/apex-html-admin-template/demo-1/form-radio.html |
Switch
Some options that can be possible with Switch below:
| Switch options | Class | Description |
|---|---|---|
| Basic Custom Swtich | .custom-switch |
Add this class as a single wrapper and
inside this wrapper, add
.custom-control-label as a
sibling of
input.custom-control-input
for better output.
id attribute of this input
and for attribute of the
label must be same.
|
| Colors |
.custom-switch.custom-switch-{colorName}
|
Use this class for colored switches. |
Switchery
Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly.
1. Required Vendor files
<link rel="stylesheet" href="switchery.min.css">
<script src="switchery.min.js"></script>2. HTML structure
<div class="form-group">
<input type="checkbox" id="switchery-default" class="switchery" checked>
<label for="switchery-default">Switchery</label>
</div>3. Initialization
var switchery = new Switchery('.switchery', { color: '#37BC9B' });Some options that can be possible with Switchery below:
| Switchery Options | Class | Description |
|---|---|---|
| Basic Switchery | .switchery |
Use this class to
input[type="checkbox"] to add
switchery. id attribute of
this input and for attribute
of the label must be same.
|
| Colors |
.switchery.switchery-{colorName}
|
Use this class for colored switchery. |
| Sizes |
data-size="[xs | sm | lg]"
|
Use this with
input[type="checkbox"] for
different sizes.
|
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Bootstrap Link | https://getbootstrap.com/docs/4.4/components/forms/#switches |
| Switchery Link | https://github.com/abpetkov/switchery |
| Template Page | https://demos.pixinvent.com/apex-html-admin-template/demo-1/form-switch.html |
Input Tag
taggingJS is a jQuery plugin to create an high customizable front-end tag system.
1. Required Vendor files
<link rel="stylesheet" href="tagging.css">
<script src="tagging.min.js"></script>2. Binding to existing DOM element
<div data-tags-input-name="tag" class="tagBox">input-tag, taggingJS</div>3. Basic usage may look something like this
$(".tagBox").tagging();Refer more configuration options from here.
Refer following links for detailed documentation, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://github.com/sniperwolf/taggingJS |
| Template Page | https://demos.pixinvent.com/apex-html-admin-template/demo-1/form-input-tags.html |
Quill Editor
Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.
Note: To change fonts of quill editor, you'll have to import your required font family in css and change editor fonts.
1. Required Vendor files:
<link rel="stylesheet" href="quill.snow.css">
<script href="quill.js"><script>2. Create the editor container:
<div id="editor"></div>3. Basic usage looks something like this.
var quill = new Quill('#editor', {
theme: 'snow'
});| Type | URL |
|---|---|
| Plugin Link | https://quilljs.com/ |
| Template Page | https://demos.pixinvent.com/apex-html-admin-template/demo-1/form-editor.html |
Date & Time Picker
The basic setup requires targetting an
input element and invoking the
picker.
Required Vendor files:
<link rel="stylesheet" href="pickadate.css">
<script src="picker.js"></script>
<script src="picker.date.js"></script>
<script src="picker.time.js"></script>
<script src="legacy.js"></script>Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://github.com/amsul/pickadate.js/ |
| Template Page | https://demos.pixinvent.com/apex-html-admin-template/demo-1/form-date-time-picker.html |
Select2
Select2 supports a wide variety of options that allow you to customize it to your needs.
1. Required Vendor files:
<link rel="stylesheet" type="text/css" href="select2.min.css">
<script src="select2.full.min.js"></script>2. Call the select2-function after the page has loaded
$(".select2").select2();You have to add plugin js and css. Some options that can be possible with select2 below:
| Select2 options | Class | Description |
|---|---|---|
| Basic select2 | .select2 |
For basic select2, use this class. You can
use this class for multiple select2 also.
Use multiple attribute for
multiple select box.
|
| Select2 with icon | data-icon |
Use data attribute
data-icon to add icon name
for each options. And use
select.select2-icons to set
icon with option.
|
| Sizes |
.select2-size-[sm | lg]
|
Use this class for small | large size of select2. |
Refer more configuration options from here.
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://select2.github.io/ |
| Template Page | https://demos.pixinvent.com/apex-html-admin-template/demo-1/form-select.html |