Basic Componant

Basic Componant
Form controls

We'll never share your email with anyone else.
Sizing

Range Inputs

Readonly

Readonly plain Text

Inline

Form Grid

Horizontal Form

Checkbox
Horizontal Form Label Sizing

Help Text

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
Must be 8-20 characters long.
Validation

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.
Supported Elements

Example invalid feedback text
More example invalid feedback text
Example invalid custom select feedback
Example invalid custom file feedback
Tooltips

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.

Checkboxes and Radios

Checkboxes

Radios

Inline

Range

Input Group

Input Group
@
@example.com
https://example.com/users/
$
.00
With textarea
Sizing

Small
Default
Large
Checkboxes and radios

Multiple inputs

First and last name
Multiple addons

$ 0.00
$ 0.00
Button Addons

Segmented Buttons

Custom Forms

Custom Select

Custom File Input

Upload
Upload
Button Badges

Switches

Switches
Add class of .form-control with <input> tag
Primary Switch

Danger Switch

Success Switch

Warning Switch

Info Switch

Radio button

Radio
Add class of .form-control with <input> tag
Primary Radio

Radio fill Button

Inline Button

Inline fill Button

Danger Radio

Radio fill Button

Inline Button

Inline fill Button

Success Radio

Radio fill

Inline

Inline fill

Warning Radio

Radio fill

Inline

Inline fill

Info Radio

Radio fill

Inline

Inline fill

Checkbox

Checkbox
Add class of .form-control with <input> tag
Default checkbox

Bordered checkbox

Inline checkbox

Bordered checkbox

Primary checkbox

Bordered checkbox

Inline checkbox

Bordered checkbox

Danger checkbox

Bordered checkbox

Inline checkbox

Bordered checkbox

Success checkbox

Bordered checkbox

Inline checkbox

Bordered checkbox

Warning checkbox

Bordered checkbox

Inline checkbox

Bordered checkbox

Info checkbox

Bordered checkbox

Inline checkbox

Bordered checkbox

Bootstrap Tags

Bootstrap Tags Input
Add class of .form-control with <input> tag
Markup

Just add data-role="tagsinput" to your input field to automatically change it to a tags input field.

True Multi Value

Use a <select multiple /> as your input element for a tags input, to gain true multi value support. Instead of a comma separated string, the values will be set in an array. Existing <option />elements will automatically be set as tags. This makes it also possible to create tags containing a comma.

Typeahead

Typeahead is not included in Bootstrap 3, so you'll have to include your own typeahead library. I'd recommed typeahead.js. An example of using this is shown below.

Categorizing Tags

You can set a fixed css class for your tags, or determine dynamically by providing a custom function.

Objects As Tags

Instead of just adding strings as tags, bind objects to your tags. This makes it possible to set id values in your input field's value, instead of just the tag's text.

                
                    <!-- Tags input css -->
                    <link href="../assets/plugins/bootstrap-tagsinput-latest/css/bootstrap-tagsinput.css" rel="stylesheet">
<!-- Tags input Js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script> <script src="../assets/plugins/bootstrap-tagsinput-latest/js/bootstrap-tagsinput.min.js"></script>

Bootstrap maxlength

bootstrap Maxlength
Add class of .form-control with <input> tag
Default

The badge will show up by default when the remaining chars are 10 or less:

Threshold

Do you want the badge to show up when there are 20 chars or less? Use the threshold option:

Color-Lables

Just add color-classwith input

Play With Positions

All you need to do is specify the placement option, with one of those strings. If none is specified, the positioning will be defauted to 'top-right'.

Also Working With Textarea

Bootstrap maxlength supports textarea as well as inputs. Even on old IE.

                
                    <!-- Bootstrap tags Js -->
                    <script src="../assets/plugins/bootstrap-maxlength/js/bootstrap-maxlength.min.js"></script>
                
            

Validation

Form Validation

                
                    <!-- Validation Js -->
                    <script src="../assets/plugins/jquery-validation/js/jquery.validate.min.js"></script>
                
            

Masking

Date
Add class of .date with data-mask attribute
Time
Add class of .hour with data-mask attribute
Phone no.
Add class of .mob_no with data-mask attribute
Network
Add class of .ip with data-mask attribute
Numbers
Add class of .autonumber with <input> tag
Currency
Add class of .autonumber with data-a-* attribute
                
                    <!-- Input mask Js -->
                    <script src="../assets/plugins/inputmask/js/inputmask.min.js"></script>
                    <script src="../assets/plugins/inputmask/js/jquery.inputmask.min.js"></script>
                    <script src="../assets/plugins/inputmask/js/autoNumeric.js"></script>
                
            

Wizard

Smart Wizard
Theme:
Title Step 1

Sub title 1

@Title content 1!.. Lorem Ipsum is simply dummy text of the printing @Content content 1 and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Sub title 2

@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Title Step 2

Sub title 1

@Title content 1!.. Lorem Ipsum is simply dummy text of the printing @Content content 1 and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Sub title 2

@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Title Step 3

Sub title 1

@Title content 1!.. Lorem Ipsum is simply dummy text of the printing @Content content 1 and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Sub title 2

@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Title Step 4

Sub title 1

@Title content 1!.. Lorem Ipsum is simply dummy text of the printing @Content content 1 and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Sub title 2

@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Smart Wizard [ Vertical Left ]
Title Step 1

Sub title 1

@Title content 1!.. Lorem Ipsum is simply dummy text of the printing @Content content 1 and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Sub title 2

@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Title Step 2

Sub title 1

@Title content 1!.. Lorem Ipsum is simply dummy text of the printing @Content content 1 and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Sub title 2

@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Title Step 3

Sub title 1

@Title content 1!.. Lorem Ipsum is simply dummy text of the printing @Content content 1 and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Sub title 2

@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Title Step 4

Sub title 1

@Title content 1!.. Lorem Ipsum is simply dummy text of the printing @Content content 1 and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Sub title 2

@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Smart Wizard [ Vertical Right ]
Title Step 1

Sub title 1

@Title content 1!.. Lorem Ipsum is simply dummy text of the printing @Content content 1 and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Sub title 2

@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Title Step 2

Sub title 1

@Title content 1!.. Lorem Ipsum is simply dummy text of the printing @Content content 1 and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Sub title 2

@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Title Step 3

Sub title 1

@Title content 1!.. Lorem Ipsum is simply dummy text of the printing @Content content 1 and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Sub title 2

@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Title Step 4

Sub title 1

@Title content 1!.. Lorem Ipsum is simply dummy text of the printing @Content content 1 and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Sub title 2

@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

                
                    <!-- Smart Wizard css -->
                    <link href="../assets/plugins/smart-wizard/css/smart_wizard.min.css" rel="stylesheet">
                    <link href="../assets/plugins/smart-wizard/css/smart_wizard_theme_arrows.min.css" rel="stylesheet">
                    <link href="../assets/plugins/smart-wizard/css/smart_wizard_theme_circles.min" rel="stylesheet">
                    <link href="../assets/plugins/smart-wizard/css/smart_wizard_theme_dots.min.css" rel="stylesheet">
<!-- Smart Wizard Js --> <script src="../assets/plugins/wizard/js/jquery.bootstrap.js"></script> <script src="../assets/plugins/smart-wizard/js/jquery.smartWizard.min.js"></script>

Datepicker

Material Datetimepicker
Date Picker

Time Picker

Date Time Picker

French Locales (Week starts at Monday)

Min Date set

Events

                
                    <!-- Material Datepicker css -->
                    <link href="../assets/plugins/material-datetimepicker/css/bootstrap-material-datetimepicker.css" rel="stylesheet">
<!-- Bootstrap Datepicker css --> <link href="../assets/plugins/bootstrap-datetimepicker/css/prettify.css" rel="stylesheet"> <link href="../assets/plugins/bootstrap-datetimepicker/css/docs.css" rel="stylesheet"> <link href="../assets/plugins/bootstrap-datetimepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"> <link href="../assets/fonts/material/css/materialdesignicons.min.css" rel="stylesheet">
<!-- Material Datepicker Js --> <script src="http://momentjs.com/downloads/moment-with-locales.min.js"></script> <script src="../assets/plugins/material-datetimepicker/js/bootstrap-material-datetimepicker.js"></script>

Color picker

Color Picker
Control Types

Hue (default)
Saturation
Brightness
Wheel
Input Modes

Text Field
Hidden Input
Inline
Positions

Valid positions include bottom left, bottom right, top left, and top right.


Bottom Left (default)
Top Left
Bottom Right
Top Right
RGB(A)

RGB
RGB input can be assigned by setting the format option to rgb.
RGBA
RGBA input can be assigned by setting the formatoption to rgb and opacity option totrue.
…And More!

Opacity
Opacity can be assigned by including the data-opacityattribute or by setting the opacity option totrue.
Keywords
CSS-wide keywords can be assigned by setting the keywordsoption to a comma-separated list of valid keywords: transparent,initial, inherit.
Default Value
This field has a default value assigned to it, so it will never be empty.
Letter Case
This field will always be uppercase.
Input Groups
Example using Bootstrap's input groups.
Color
Input group example with addon.
Swatches
Example with swatches.
Swatches and Opacity
Example with swatches and opacity.
                
                    <!-- Minicolors css -->
                    <link href="../assets/plugins/mini-color/css/jquery.minicolors.css" rel="stylesheet">
<!-- Minicolors Js --> <script src="../assets/plugins/mini-color/js/jquery.minicolors.min.js"></script>

Select

Select2
Single Select

Theselect2 can take a regular select box like this...

Multi Select

The select below is declared with themultiple attribute

With Placeholder

select2 uses the placeholder attribute on multiple select boxes

Tagging Support

The select below is declared with the class.js-example-tags

Automatic Tokenization

The select below is declared with the class.js-example-tokenizer

RTL Support

The select below is declared with the class.js-example-rtl

Limiting The Number Of Selections

The select below is declared with the class.js-example-basic-multiple-limit

Diacritics Support

The select below is declared with the class.js-example-diacritics

Responsive Width

The select below is declared with the class.js-example-responsive

Loading With Array

The select below is declared with the class.js-example-data-array

Load Remote Data ( Ajax )

The select below is declared with the class.js-data-example-ajax

Disabled Results

The select below is declared with the class.js-example-disabled-results

Hiding The Search Box

The select below is declared with the class.js-example-basic-hide-search

Enable-Disable

The select below is declared with the class.js-example-disabled

                
                    <!-- Select2 css -->
                    <link href="../assets/plugins/select2/css/select2.min.css" rel="stylesheet">
<!-- Select2 Js --> <script src="../assets/plugins/select2/js/select2.full.min.js"></script>

Multi select

multi select
Pre-Selected Options

Custom Headers And Footers

Optgroup

Searchable

Public Methods

                
                    <!-- Multi select css -->
                    <link href="../assets/plugins/multi-select/css/multi-select.css" rel="stylesheet">
<!-- Multi select Js --> <script src="../assets/plugins/multi-select/js/jquery.quicksearch.js"></script> <script src="../assets/plugins/multi-select/js/jquery.multi-select.js"></script>
×