Josephin Doe

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

Share your thoughts

#### Form Elements Advance

##### Raised Button

Basic

##### Code Explanation for Raised Button

    																/* Use For Basic Switch */

    																<div class="row advance-elements">
    																 	<div class="col-md-4">
    																	    <h6 class="sub-title">Basic</h6>

    																	</div>
    																</div>

Diffrent Sizes

##### Code Explanation for Diffrent Sizes

    																/* Use For Diffrent Sizes */
    																<div class="row advance-elements">
    																	<div class="col-md-4">
    																		<h6 class="sub-title">Diffrent Sizes</h6>

    																	</div>
    																</div>

Action

##### Code Explanation for Action Button

    																/* Use For Action */
    																<div class="row advance-elements">
    																	<div class="col-md-4">
    																		<h6 class="sub-title">Action</h6>

    																	</div>
    																</div>

##### Checkboxes

Border Checkbox

##### Code Explanation for Border Checkbox

    															/* For Border Checkboxes */

    															/* Use For Primary Border checkbox */
    																<div class="rkmd-checkbox checkbox-rotate checkbox-ripple">
    																	<label class="input-checkbox checkbox-primary">
    																		<input type="checkbox" id="checkbox" checked>
    																		<span class="checkbox"></span>
    																	</label>
    																	<div class="captions">Primary</div>
    																</div>
    															/* Use For warning Border checkbox */
    																<div class="rkmd-checkbox checkbox-rotate checkbox-ripple">
    																	<label class="input-checkbox checkbox-warning">
    																		<input type="checkbox" id="checkbox-1" checked>
    																		<span class="checkbox"></span>
    																	</label>
    																	<div class="captions">Warning</div>
    																</div>
    															/* Use For success Border checkbox */
    																<div class="rkmd-checkbox checkbox-rotate checkbox-ripple">
    																	<label class="input-checkbox checkbox-success">
    																		<input type="checkbox" id="checkbox-2" checked>
    																		<span class="checkbox"></span>
    																	</label>
    																	<div class="captions">Success</div>
    																</div>
    															/* Use For info Border checkbox */
    																<div class="rkmd-checkbox checkbox-rotate checkbox-ripple">
    																	<label class="input-checkbox checkbox-info">
    																		<input type="checkbox" id="checkbox-3" checked>
    																		<span class="checkbox"></span>
    																	</label>
    																	*lt;div class="captions">Info</div>
    																</div>
    															/* Use For danger Border checkbox */
    																<div class="rkmd-checkbox checkbox-rotate checkbox-ripple">
    																	<label class="input-checkbox checkbox-danger">
    																		<input type="checkbox" id="checkbox-4" checked>
    																		<span class="checkbox"></span>
    																	</label>
    																	<div class="captions">Danger</div>
    																</div>
    															/* Use For disable Border checkbox */
    																<div class="rkmd-checkbox checkbox-rotate checkbox-ripple">
    																	<label class="input-checkbox checkbox-primary">
    																		<input type="checkbox" id="checkbox-5" disabled="">
    																		<span class="checkbox"></span>
    																	</label>
    																	<div class="captions">Disabled</div>
    																</div>

Primary
Warning
Success
Info
Danger
Disabled
Fade-In Checkbox

##### Code Explanation for Fade in Checkbox

    															/* For Fade In Checkboxes */

    															/* Use For Primary Fade in checkbox */
    															<div class="checkbox-fade fade-in-primary">

    																		 Primary

    															</div>
    															/* Use For warning Fade in checkbox */
    															<div class="checkbox-fade fade-in-warning">

    																		 Warning

    															</div>
    															/* Use For Success Fade in checkbox */
    															<div class="checkbox-fade fade-in-success">

    																		 Success

    															</div>
    															/* Use For Info Fade in checkbox */
    															<div class="checkbox-fade fade-in-info">

    																		 Info

    															</div>
    															/* Use For Danger Fade in checkbox */
    															<div class="checkbox-fade fade-in-danger">

    																		 Danger

    															</div>
    															/* Use For Disabled Fade in checkbox */
    															<div class="checkbox-fade fade-in-default">

    																		 Disabled

    															</div>

Primary
Warning
Success
Info
Danger
Disabled
Color Checkbox

##### Code Explanation for color Checkbox

    																/* For Color Checkboxes */

    															/* Use For Primary color checkbox */
    															<div class="checkbox-color checkbox-primary">
    																<input id="checkbox2" type="checkbox" checked="">
    																	<label for="checkbox2">
    																		Primary
    																	</label>
    															</div>
    															/* Use For success color checkbox */
    															<div class="checkbox-color checkbox-success">
    																<input id="checkbox3" type="checkbox" checked="">
    																	<label for="checkbox3">
    																		Success
    																	</label>
    															</div>
    															/* Use For info color checkbox */
    															<div class="checkbox-color checkbox-info">
    																<input id="checkbox4" type="checkbox" checked="">
    																	<label for="checkbox4">
    																		Info
    																      </label>
    															</div>
    															/* Use For Warning color checkbox */
    															<div class="checkbox-color checkbox-warning">
    																<input id="checkbox5" type="checkbox" checked="">
    																	<label for="checkbox5">
    																		Warning
    																	</label>
    															</div>
    															/* Use For Danger color checkbox */
    															<div class="checkbox-color checkbox-danger">
    																<input id="checkbox6" type="checkbox" checked="">
    																	<label for="checkbox6">
    																		Check me out
    																	</label>
    															</div>
    															/* Use For Disabled color checkbox */
    															<div class="checkbox-color checkbox-default">
    																<input id="checkbox7" type="checkbox" disabled="">
    																	<label for="checkbox7">
    																		Disabled
    																	</label>
    															</div>

Primary
Success
Info
Warning
Check me out
Disabled

##### Radio-Buttons

##### Code Explanation for Border Checkbox

Default

##### Code Explanation for Border Checkbox

    									     				  	/* For Default Radio Button */

    																<div class="form-radio">
    																	<form>
    																	/* use for Radio Button */
    																		<div class="radio radiofill">

    																					I'm the label from a radio button

    																		</div>
    																	/* use for Selected Radio Button */
    																		<div class="radio radiofill">

    																					I'm the label from a radio button

    																		</div>
    																	/* use for Disable Radio Button */
    																		<div class="radio radiofill radio-disable">

    																					This is Disable Radio Button

    																		</div>
    																	</form>
    																</div>

I'm the label from a radio button
I'm the label from a radio button
This is Disable Radio Button
Filled

##### Code Explanation for Filled radio

    									     				  	/* For Radio Filled Button */

    																<div class="form-radio">
    																	<form>
    																	/* use for Selected Fill Radio Button */
    																		<div class="radio">

    																					I'm the label from a radio button

    																		</div>
    																	/* use for Fill Radio Button */
    																		<div class="radio">

    																					I'm the label from a radio button

    																		</div>
    																	/* use for Disable Fill Radio Button */
    																		<div class="radio radio-disable">

    																					This is Disabled Radio Button

    																		</div>
    																	</form>
    																</div>

I'm the label from a radio button
I'm the label from a radio button
This is Disabled Radio Button
Radio Inline

##### Code Explanation for inline radio

    									     				  	/* For Radio Inline Button */

    																<div class="form-radio">
    																	<form>
    																	/* use for Radio Inline Button */
    																		<div class="radio radiofill radio-inline">

    																					Inline 1

    																		</div>
    																	/* use for Selected Inline Radio Button */
    																		<div class="radio radiofill radio-inline">

    																					Inline 2

    																		</div>
    																	/* use for Disable Inline Radio Button */
    																		<div class="radio radiofill radio-inline radio-disable">

    																					Inline Disable

    																		</div>
    																	</form>
    																</div>

Inline 1
Inline 2
Inline Disable
Filled Inline

##### Code Explanation for Filled inline radio

    									     				  	/* For Radio Filled Inline Button */

    																<div class="form-radio">
    																	<form>
    																		<div class="form-radio">
    																			/* use for selected filled inline button */
    																			<div class="radio radio-inline">

    																						Inline 1

    																			</div>
    																			/* use for filled inline button */
    																			<div class="radio radio-inline">

    																						Inline 2

    																			</div>
    																			/* use for disable filled inline button */
    																			<div class="radio radio-inline radio-disable">

    																						Disable Inline

    																			</div>
    																		</div>
    																	</form>
    																</div>

Inline 1
Inline 2
Disable Inline

##### Select 2

Multi Select

##### Code Explanation for multiple select radio

    									     				  	/* For multiple Select */

Single Select

##### Code Explanation for single select radio

    									     				  	/* For Single Select */

With Placeholder

##### Code Explanation for placeholder

    									     				  	/* For with placeholder select */

Limiting the number of selections

##### Code Explanation for Limiting the number of selections

    									     				  	/* For Limiting the number of selections */

Tagging Support

##### Code Explanation for Tagging Support

    									     				  	/* For Tagging Support */

Automatic Tokenization

##### Code Explanation for Automatic Tokenization

    									     				  	/* For Automatic Tokenization */

RTL Support

##### Code Explanation for RTL Support

    									     				  	/* For RTL Support */

Diacritics support

##### Code Explanation for Diacritics support

    									     				  	/* For Diacritics support */

Responsive Width

##### Code Explanation for Responsive Width

    									     				  	/* For Responsive Width */

Loading Array Data

##### Code Explanation for Loading Array Data

    									     				  	/* For Loading Array Data */

Loading Remote Data ( Ajax )

##### Code Explanation for Loading Remote Data ( Ajax )

    									     				  	/* For Loading Remote Data ( Ajax ) */

Disabled Results

##### Code Explanation for Disabled Results

    									     				  	/* For Disabled Results */

Hiding the search box

##### Code Explanation for Hiding the search box

    									     				  	/* For Hiding the search box */

Theme support

##### Code Explanation for Theme support

    									     				  	/* For Theme support */

Theme support

##### Code Explanation for Theme support

    									     				  	/* For Theme support */

##### MaxLength

Default

##### Code Explanation for Default Max-length

    									     				  	/* For Default Max-length*/

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

Thresold

##### Code Explanation for thresold Max-length

    									     				  	/* For thresold Max-length*/

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

Color-Labels

##### Code Explanation for Color-Labels

    									     				  	/* For Color-Labels max-length*/

Do you want the badge with colors? Use the `warningClass` and `limitReachedClass` option

Play With Positions

##### Code Explanation for Play With Positions

    									     				  	/* For Play With Positions max-length*/

    		                                        		<input type="text" class="form-control position-class" placeholder="Type your keywords..." maxlength="25">

Do you want change the position of badges? Use the `placement`option with diffrent-values

Also Working With Textarea

##### Code Explanation for Working With Textarea

    									     				  	/* For Working With Textarea*/

Bootstrap maxlength supports textarea as well as inputs

##### Multi Select

Single

##### Code Explanation for Single select value

    									     				  	/* For Single select value */
    									     				  	<select class="form-control" id="example-single">
    									     				  		<option value="cheese">Cheese</option>
    									     				  		<option value="h">Hanry Die</option>
    									     				  		<option value="j">John Doe</option>
    									     				  		<option value="c">Come Leo</option>
    									     				  		<option value="h">Hampri Catlin</option>
    									     				  	</select>

The following example shows the default behavior when the `multiple` attribute is omitted

Multiple

##### Code Explanation for Multiple select value

    									     				  	/* For Multiple select value */
    									     				  	<select class="form-control" id="example-multiple-selected" multiple="multiple">
    									     				  		<option value="cheese">Cheese</option>
    									     				  		<option value="h">Hanry Die</option>
    									     				  		<option value="j">John Doe</option>
    									     				  		<option value="c">Come Leo</option>
    									     				  		<option value="h">Hampri Catlin</option>
    									     				  	</select>

If multiple options are selected in advance and the select lacks the multiple attribute, the last option marked as `selected` will initially be `selected` by the plugin

All Group Option Select

##### Code Explanation for All Group Option Select value

    									     				  	/* For All Group Option Select value */

    									     				  	<select id="example-enableClickableOptGroups" multiple="multiple">
    									     				  		<optgroup label="Group 1">
    									     				  			<option value="1-1">Option 1.1</option>
    									     				  			<option value="1-2" selected="selected">Option 1.2/option>
    									     				  			<option value="1-3" selected="selected">Option 1.3/option>
    									     				  		</optgroup>
    									     				  		<optgroup label="Group 2">
    									     				  			<option value="2-1">Option 2.1</option>
    									     				  			<option value="2-2">Option 2.2</option>
    									     				  			<option value="2-3">Option 2.3</option>
    									     				  		</optgroup>
    									     				  	</select>

The following example shows the default behavior when the `multiple` attribute is omitted

Collapse Group

##### Code Explanation for Collapse Group

    									     				  	/* For Collapse Group value */

    									     				  	<select id="example-enableCollapsibleOptGroups" multiple="multiple">
    									     				  		<optgroup label="Group 1">
    									     				  			<option value="1-1" disabled>Option 1.1</option>
    									     				  			<option value="1-2" selected="selected">Option 1.2</option>
    									     				  			<option value="1-3" selected="selected">Option 1.3</option>
    									     				  		</optgroup>
    									     				  		<optgroup label="Group 2">
    									     				  			<option value="2-1">Option 2.1</option>
    									     				  			<option value="2-2">Option 2.2</option>
    									     				  			<option value="2-3">Option 2.3</option>
    									     				  		</optgroup>
    									     				  	</select>

The following example shows disable option,add `disabled` keyword to that option

Disable Option

##### Code Explanation for Disable Option

    									     				  	/* For Disable Option value */

    									     				  	<select id="example-enableClickableOptGroups-init" multiple="multiple">
    									     				  		<optgroup label="Group 1">
    									     				  			<option value="1-1" disabled>Option 1.1</option>
    									     				  			<option value="1-2" selected="selected">Option 1.2</option>
    									     				  			<option value="1-3" selected="selected">Option 1.3</option>
    									     				  		</optgroup>
    									     				  		<optgroup label="Group 2">
    									     				  			<option value="2-1">Option 2.1</option>
    									     				  			<option value="2-2">Option 2.2</option>
    									     				  			<option value="2-3">Option 2.3</option>
    									     				  		</optgroup>
    									     				  	</select>

The following example shows disable option,add `disabled` keyword to that option

Multiple Group Select

##### Code Explanation for Multiple Group Select value

    									     				  	/* For Multiple Group Select value */

    									     				  	<select id="example-multiple-optgroups" multiple="multiple">
    									     				  		<optgroup label="Group 1">
    									     				  			<option value="1-1">Option 1.1</option>
    									     				  			<option value="1-2" selected="selected">Option 1.2</option>
    									     				  			<option value="1-3" selected="selected">Option 1.3</option>
    									     				  		</optgroup>
    									     				  		<optgroup label="Group 2">
    									     				  			<option value="2-1">Option 2.1</option>
    									     				  			<option value="2-2">Option 2.2</option>
    									     				  			<option value="2-3">Option 2.3</option>
    									     				  		</optgroup>
    									     				  	</select>

The plugin naturally supports optgroups, however the group headers are not clickable by default. See the `enableClickableOptGroups` option for details.

Pre-selected options

##### Code Explanation for Pre-selected options

    									     				  	/* For Pre-selected options */

    									     				  	<select multiple="multiple" id="my-select" name="my-select[]">
    									     				  		<option value='elem_1' selected="">elem 1</option>
    									     				  		<option value='elem_2'>elem 2</option>
    									     				  		<option value='elem_3'>elem 3</option>
    									     				  		<option value='elem_4'>elem 4</option>
    									     				  		<option value='elem_5'>elem 5</option>
    									     				  </select>

Custom headers and footers

##### Code Explanation for Custom headers and footers

    									     				  	/* For Custom headers and footers */

    									     				  	<select id='custom-headers1' multiple='multiple'>
    									     				  		<option value='elem_1'>elem 1</option>
    									     				  		<option value='elem_2'>elem 2</option>
    									     				  		<option value='elem_3'>elem 3</option>
    									     				  		<option value='elem_4'>elem 4</option>
    									     				  		<option value='elem_5'>elem 5</option>
    									     				  		<option value='elem_6'>elem 6</option>
    									     				  		<option value='elem_7'>elem 7</option>
    									     				  		<option value='elem_8'>elem 8</option>
    									     				  		<option value='elem_9'>elem 9</option>
    									     				  		<option value='elem_10'>elem 10</option>
    									     				  	</select>

Optgroup

##### Code Explanation for Optgroup

    									     				  	/* For Optgroup */

    									     				  	<select id='optgroup' multiple='multiple'>
    									     				  		<optgroup label='Friends'>
    									     				  			<option value='1'>Yoda</option>
    									     				  			<option value='2' selected>Obiwan</option>
    									     				  		</optgroup>
    									     				  		<optgroup label='Enemies'>
    									     				  			<option value='3'>Palpatine</option>
    									     				  			<option value='4' disabled>Darth Vader</option>
    									     				  		</optgroup>
    									     				  	</select>

Searchable

##### Code Explanation for Searchable

    									     				  	/* For Searchable */

    									     				  	<select id='custom-headers' class="searchable" multiple='multiple'>
    									     				  		<option value='elem_1' selected>elem 1</option>
    									     				  		<option value='elem_2'>elem 2</option>
    									     				  		<option value='elem_3'>elem 3</option>
    									     				  		<option value='elem_4' selected>elem 4</option>
    									     				  		<option value='elem_5'>elem 5</option>
    									     				  		<option value='elem_6'>elem 6</option>
    									     				  		<option value='elem_7'>elem 7</option>
    									     				  		<option value='elem_8'>elem 8</option>
    									     				  		<option value='elem_9'>elem 9</option>
    									     				  		<option value='elem_10'>elem 10</option>
    									     				  		<option value='elem_11'>elem 11</option>
    									     				  		<option value='elem_12'>elem 12</option>
    									     				  		<option value='elem_13'>elem 13</option>
    									     				  		<option value='elem_14'>elem 14</option>
    									     				  		<option value='elem_15'>elem 15</option>
    									     				  		<option value='elem_16'>elem 16</option>
    									     				  	</select>

Public methods

##### Code Explanation for Public methods

    									     				  	/* For Public methods */

    									     				  	<button type="button" class="btn btn-primary waves-effect waves-light m-b-5" id='select-all'>select all</button>
    									     				  	<button type="button" class="btn btn-primary waves-effect waves-light m-b-5" id='deselect-all'>deselect all</button>
    									     				  	<button type="button" class="btn btn-primary waves-effect waves-light m-b-5" id='select-5'>select 5 elems</button>
    									     				  	<button type="button" class="btn btn-primary waves-effect waves-light m-b-5" id='deselect-5'>deselect 5 elems</button>

    															<select id='public-methods' multiple='multiple'>
    			                                                    <option value='elem_1'>elem 1</option>
    			                                                    <option value='elem_2' disabled>elem 2</option>
    			                                                    <option value='elem_3'>elem 3</option>
    			                                                    <option value='elem_4'>elem 4</option>
    			                                                    <option value='elem_5'>elem 5</option>
    			                                                    <option value='elem_6'>elem 6</option>
    			                                                    <option value='elem_7'>elem 7</option>
    			                                                    <option value='elem_8'>elem 8</option>
    			                                                    <option value='elem_9'>elem 9</option>
    			                                                    <option value='elem_10'>elem 10</option>
    		                                                	</select>

##### Tags

Markup

##### Code Explanation for tag Markup

    									     				  	/* For tag Markup */

    									     				  	<div class="tags_add">

    									     				  	</div>

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

Colors

##### Code Explanation for tag Colors

    									     				  	/* For tag Colors */

    									     				  	<div class="color-tags">

    									     				  	</div>

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

Max-Characters

##### Code Explanation for Max-Characters tags

    									     				  	/* For Max-Characters tags */

    									     				  	<div class="tags_max_char">

    									     				  	</div>

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

Multiple

##### Code Explanation for Multiple-Characters tags

    									     				  	/* For Multiple-Characters tags */

    									     				  	<div class="tags_add_multiple">

    									     				  	</div>

Use a `<select multiple />` as your input element for a tags input, to gain true multivalue support. Instead of a comma separated string, the values will be set in an array.

Max-Tags

##### Code Explanation for Max-Tags

    									     				  	/* For Max-Tags */

    									     				  	<div class="tags_add_max">

    									     				  	</div>

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

##### Date-Time Widgets

Date Picker

##### Code Explanation for Date Picker

    									     				  	/* For Date Picker */

    									     				<div class="form-control-wrapper">
    									     				  	<input type="text" id="date" class="form-control floating-label" placeholder="Date">
    									     				</div>

Time Picker

##### Code Explanation for Time Picker

    									     				  	/* For Time Picker */

    									     				  	<div class="form-control-wrapper">
    									     				  		<input type="text" id="time" class="form-control floating-label" placeholder="Time">
    									     				  	</div>

Date & Time Picker

##### Code Explanation for Date & Time Picker

    									     				  	/* For Date & Time Picker */

    									     				  	<div class="form-control-wrapper">
    									     				  		<input type="text" id="date-format" class="form-control floating-label" placeholder="Begin Date Time">
    									     				  	</div>

Min Date Set

##### Code Explanation for Min Date Set

    									     				  	/* For Min Date Set */

    									     				  	<div class="form-control-wrapper">
    									     				  		<input type="text" id="min-date" class="form-control floating-label" placeholder="Start Date">
    									     				  	</div>

Min Date Set

##### Code Explanation for Min Date Set

    									     				  	/* For Min Date Set */

    									     				  	<div class="form-control-wrapper">
    									     				  		<input type="text" id="date-fr" class="form-control" value="18/03/2015 08:00" data-dtp="dtp_5xXoR">
    									     				  	</div>

Date Time Range Picker

##### Code Explanation for Date Time Range Picker

    									     				  	/* For Date Time Range Picker */
    															 <div class="col-md-6">
    										     				  	<div class="form-control-wrapper">
    										     				  		<input type="text" id="date-start" class="form-control floating-label" placeholder="Start Date">
    										     				  	</div>
    									     				  	</div>
    									     				  	<div class="col-md-6">
    										     				  	<div class="form-control-wrapper">
    										     				  		<input type="text" id="date-end" class="form-control floating-label" placeholder="End Date">
    										     				  	</div>
    															</div>

##### bootstrap-date time picker

Date Time Picker

##### Code Explanation for Bootstrap Date Time Picker

    									     				  	/* For Date Time Range Picker */

    									     				  	<div class="form-group">
    									     				  		<div class='input-group date' id='datetimepicker1'>
    									     				  			<input type='text' class="form-control"/>

    									     				  		</div>
    									     				  	</div>

Using Locales

##### Code Explanation for Bootstrap Locales

    									     				  	/* For Bootstrap Locales */

    									     				  	<div class="form-group">
    									     				  		<div class='input-group date' id='datetimepicker2'>
    									     				  			<input type='text' class="form-control"/>

    									     				  		</div>
    									     				  	</div>

Time Picker

##### Code Explanation for Bootstrap time picker

    									     				  	/* For Bootstrap time picker */

    									     				  	<div class="form-group">
    									     				  		<div class='input-group date' id='datetimepicker3'>
    									     				  			<input type='text' class="form-control"/>

    									     				  		</div>
    									     				  	</div>

No Icon (input field only)

##### Code Explanation for Bootstrap no icon

    									     				  	/* For Bootstrap no icon */

    									     				  	<div class="form-group">
    									     				  		<input type='text' class="form-control" id='datetimepicker4'/>
    									     				  	</div>

Enabled/Disabled Dates

##### Code Explanation for Bootstrap Enabled/Disabled Dates

    									     				  	/* For Bootstrap Enabled/Disabled Dates */

    									     				  	<div class="form-group">
    									     				  		<div class='input-group date' id='datetimepicker5'>
    									     				  			<input type='text' class="form-control"/>

    									     				  			</div>
    									     				  	</div>

Custom Icons

##### Code Explanation for Bootstrap Custom Icons

    									     				  	/* For Bootstrap Custom Icons */

    									     				  	<div class='input-group date' id='datetimepicker8'>
    									     				  		<input type='text' class="form-control"/>

    									     				  	</div>

Linked Pickers

##### Code Explanation for Bootstrap Linked Pickers Dates

    									     				  	/* For Bootstrap Linked Pickers Dates */

    									     				  	<div class="col-md-6">
    									     				  		<div class="form-group">
    									     				  			<div class='input-group date' id='datetimepicker6'>
    									     				  				<input type='text' class="form-control" />

    									     				  			</div>
    									     				  		</div>
    									     				  	</div>
    									     				  	<div class="col-md-6">
    							     				  				<div class="form-group">
    								     				  				<div class='input-group date' id='datetimepicker7'>
    									     				  				<input type='text' class="form-control" />

    								     				  				</div>
    							     				  				</div>
    						     				  				</div>

Min View Mode

##### Code Explanation for Bootstrap Min View Mode

    									     				  	/* For Bootstrap Min View Mode */

    									     				  	<div class='input-group date' id='datetimepicker10'>
    									     				  		<input type='text' class="form-control"/>

    									     				  	</div>

Disabled Days of the Week

##### Code Explanation for Bootstrap Disabled Days of the Week

    									     				  	/* For Bootstrap Disabled Days of the Week */

    									     				  	<div class='input-group date' id='datetimepicker11'>
    									     				  		<input type='text' class="form-control" />

    									     				  	</div>

View Mode

##### Code Explanation for Bootstrap View Mode

    									     				  	/* For Bootstrap View Mode */

    									     				  	<div class='input-group date' id='datetimepicker9'>
    									     				  		<input type='text' class="form-control"/>

    									     				  	</div>

Birthday Calender

##### Code Explanation for Bootstrap Birthday Calender

    									     				  	/* For Bootstrap Birthday Calender */

    															<input type="text" name="birthdate" class="form-control" value="10/24/1984"/>

Date Range Picker

##### Code Explanation for Bootstrap Date Range Picker

    									     				  	/* For Bootstrap Date Range Picker */

    															<input type="text" name="daterange" class="form-control" value="01/01/2015 - 01/31/2015"/>

Date Range Picker Blank input

##### Code Explanation for Bootstrap Date Range Picker Blank input

    									     				  	/* For Bootstrap Date Range Picker Blank input */

    															<input type="text" name="datefilter" class="form-control" value=""/>

Multiple Option

##### Code Explanation for Bootstrap Multiple Option

    									     				  	/* For Bootstrap Multiple Option */

    									     				  	<div id="reportrange" class="f-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">

    									     				  		</div>

Date Time Picker

##### Code Explanation for Date Time Picker

    									     				  	/* For Date Time Picker */

    									     				  	<input type="text" id="config-demo" class="form-control">

Date Time Picker

##### Code Explanation for Date Time Picker

    									     				  	/* For Date Time Picker */

    									     				  	<div class="input-daterange input-group" id="datepicker">
    									     				  		<input type="text" class="input-sm form-control" name="start" />
    									     				  		to
    									     				  		<input type="text" class="input-sm form-control" name="end" />
    									     				  	</div>

to
Date Picker with Today

##### Code Explanation for Date Picker with Today

    									     				  	/* For Date Picker with Today */

    									     				  	<div class="input-group date input-group-date-custom">
    									     				  		<input type="text" class="form-control">

    									     				  	</div>

Multi Select Dates

##### Code Explanation for Multi Select Dates

    									     				  	/* For Multi Select Dates */

    									     				  	<div class="input-group date multiple-select">
    									     				  		<input type="text" class="form-control">

    									     				  	</div>

##### Color picker

Basic

##### Code Explanation for Basic color Modal

    									     				  	/* For Basic color Modal */

    									     				  	<div class="input-group">
    									     				  		<input type='text' id="custom" class="m-b-15" /><hr>
    									     				  		<input class="jscolor m-b-15" value="ab2567"><hr>

    									     				  		<p>
    									     				  			<input id="foo" class="jscolor" value="cc4499">
    									     				  		</p>

    									     				  	</div>

Flat mode

##### Code Explanation for Using Flat mode

    									     				  	/* For Using Locales */

    									     				  	<div class="form-group">
    									     				  		<input type="text" id="flat"/>
    									     				  	</div>

Flat mode with clear

##### Code Explanation for Flat mode with clear

    									     				  	/* For Time Picker */

    									     				  	<div class="form-group">
    									     				  		<input type='text' id="flatClearable"/>
    									     				  	</div>

No Icon (input field only)

##### Code Explanation for No Icon (input field only)

    									     				  	/* For No Icon (input field only) */

    									     				  	<div class="form-group">
    									     				  		<input type='color' name='color' />
    									     				  			<input type='color' name='color2' value='#3355cc' />
    									     				  			<hr> Large dark picker:
    									     				  			<input value="ffcc00" class="jscolor {width:243, height:150, position:'right',
    									     				  			borderColor:'#FFF', insetColor:'#FFF', backgroundColor:'#666'}">
    									     				  	</div>

Large dark picker: