Textual form controls—like inputs, selects, and textareas—are styled with the
.form-control class. Included are styles for general appearance, focus state, sizing, and more.
Set heights using classes like
.form-control-lg, custom-select-lg and
Set different styles of input using
.filled-input, .outline-input and
.transparent-input modifier classes.
Change the look using shape modifier classes. Add
Help text below inputs can be styled with
.form-text. Inline help text can be implemented using utility classes like
A custom file browser with change and remove function.
Checkbox and radio
For further styling, use required contextual classes like
Create easily-styleable toggle buttons with a lightweight toggle jQuery plugin.
Toggle with text
A comfortable, responsive and easily customizable range slider with plenty options.
Set min value, max value and start point
Set custom step and snap grid to step
For smaller size range, use
Use contextual classes inside data-extra-classes - like
.irs-orange, .irs-info to change the colors.
Bootstrap Select Menu
Custom select menus need only a custom class,
.form-control .custom-select to trigger the custom styles.
The jQuery replacement for select boxes. Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
Select2 Input Tags
Tagging can be used in multi-value select boxes. Try entering a value that isn't listed in the dropdown - you'll be able to add it as a new option!
A Bootstrap 4 / jQuery plugin to create input spinner elements for number input.
Add the relative form input group sizing classes
.input-group-sm .input-group-lg for additional sizes
Date Range Picker With Times
Single Date Picker
Limit Selectable Dates
Predefined Date Ranges
A flat, simple, responsive and hackable Color-Picker. No dependencies, no jQuery.
RGB input can be assigned by setting the
RGBA input can be assigned by setting the
Opacity can be assigned by including the
data-opacityattribute or by setting the
CSS-wide keywords can be assigned by setting the
keywordsoption to a comma-separated list of valid keywords:
transparent, initial, inherit.
This field has a default value assigned to it, so it will never be empty.
This field will always be uppercase.
Example with swatches.
Example with swatches and opacity.