Datta Able - Most Complete Bootstrap Admin Template

Basic Componant

Input Group

@example.com

Your vanity URL

https://example.com/users/

.00

With textarea

Sizing

Small

Default

Large

Checkboxes and radios

Multiple inputs

First and last name

Multiple addons

$ 0.00

Button Addons

Buttons With Dropdowns

Segmented Buttons

Custom Forms

Custom Select

Options

Custom File Input

Upload

Choose file

Upload

Choose file

Button Badges

Switches

Radio button

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

Password

Confirm password

Required

URL

Phone

Select

Text

File

Check me

Radios

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

Custom radios

Option one is this and that—be sure to include why it's great Option two can be something else and selecting it will deselect option one Option three is disabled

Checkbox

Check me out

Custom checkbox
Check me

                
                    <!-- 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

Mobile No.

Telephone

Tel. with Code Area

US Telephone

Network

Add class of .ip with data-mask attribute

IP Address

IPV4

IPV6

Numbers

Add class of .autonumber with <input> tag

Default

Auto Numeric (%)

Maximum Value (0 - 9999)

Range Value (-99.99 - 1000.00)

Bracket Value

Currency

Add class of .autonumber with data-a-* attribute

Dollar ($)

Euro (€)

Rupee (Rs.)

Renminbi (¥)

Pound (£)

                
                    <!-- 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

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 ]

Step 1

This is step description
Step 2

This is step content
Step 3

This is step text
Step 4

This is step content

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.

Step 1

This is step description
Step 2

This is step content
Step 3

This is step text
Step 4

This is step content

                
                    <!-- 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>

Form Components

Basic Componant

Basic Componant

Form controls

Sizing

Range Inputs

Readonly

Readonly plain Text

Inline

Form Grid

Horizontal Form

Horizontal Form Label Sizing

Help Text

Validation

Supported Elements

Tooltips

Checkboxes and Radios

Checkboxes

Radios

Inline

Range

Input Group

Input Group

Sizing

Checkboxes and radios

Multiple inputs

Multiple addons

Button Addons

Buttons With Dropdowns

Segmented Buttons

Custom Forms

Custom Select

Custom File Input

Button Badges

Switches

Switches

Default Switch

Alternative Switch

Primary Switch

Danger Switch

Success Switch

Warning Switch

Info Switch

Outline

Square Button

Disabled Button

Rounded Button

Glow Button

Shadow Button

Sizes [ Large ]

Sizes [ Small ]

Checkbox Button

Radio Buttons

Button With Icon

Outline Icon Buttons

Only Icon

Outline Icon

Icon Button Rounded

Icon Outline Button Rounded

Basic Dropdown Button

Split Dropdown Button

Basic Outline Dropdown Button

Split Outline Dropdown Button

Basic Icon Dropdown

Outline Icon Dropdown

Basic Rounded Icon Dropdown

Outline Rounded Icon Dropdown

Basic Button Group

Button Toolbar

Button Toolbar Size

Nesting

Vertical Variation

Radio button

Radio

Default Radio

Radio Fill Button

Inline Button

Inline fill Button

Primary Radio

Radio fill Button