.form-control with <input> tag
.form-control with <input> tag
.form-control with <input> tag
.form-control with <input> tag
Just add data-role="tagsinput" to your input field to automatically change it to a tags input field.
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 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.
You can set a fixed css class for your tags, or determine dynamically by providing a custom function.
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>
.form-control with <input> tag
The badge will show up by default when the remaining chars are 10 or less:
Do you want the badge to show up when there are 20 chars or less? Use the threshold option:
Just add color-classwith input
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'.
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 Js -->
<script src="../assets/plugins/jquery-validation/js/jquery.validate.min.js"></script>
.date with data-mask attribute
.hour with data-mask attribute
.mob_no with data-mask attribute
.ip with data-mask attribute
.autonumber with <input> tag
.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>
This is step description
This is step content
This is step text
This is step content
@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.
@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
@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.
@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
@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.
@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
@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.
@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
This is step description
This is step content
This is step text
This is step content
@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.
@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
@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.
@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
@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.
@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
@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.
@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
@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.
@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
@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.
@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
@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.
@Title content 2!.. Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
@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.
@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>
<!-- 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>
Valid positions include bottom left, bottom right, top left, and top right.
format option to rgb.
formatoption to rgb and opacity option totrue.
data-opacityattribute or by setting the opacity option totrue.
keywordsoption to a comma-separated list of valid keywords: transparent,initial, inherit.
<!-- 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>
Theselect2 can take a regular select box like this...
The select below is declared with themultiple attribute
select2 uses the placeholder attribute on multiple select boxes
The select below is declared with the class.js-example-tags
The select below is declared with the class.js-example-tokenizer
The select below is declared with the class.js-example-rtl
The select below is declared with the class.js-example-basic-multiple-limit
The select below is declared with the class.js-example-diacritics
The select below is declared with the class.js-example-responsive
The select below is declared with the class.js-example-data-array
The select below is declared with the class.js-data-example-ajax
The select below is declared with the class.js-example-disabled-results
The select below is declared with the class.js-example-basic-hide-search
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 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>