Datta Able - Most Complete Bootstrap Admin Template

Alert

<!-- Sweet alert Js -->
<script src="../assets/plugins/sweetalert/js/sweetalert.min.js"></script>

Datepicker

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

<!-- Datepicker Js -->
<script src="../assets/plugins/bootstrap-datetimepicker/js/bootstrap-datepicker.min.js"></script>

Grid Stack

Float Grid Demo

SOURCE

<!-- Gridstack css -->
<link href="../assets/plugins/gridstack/css/gridstack.min.css" rel="stylesheet">
<link href="../assets/css/pages/gridstack.css" rel="stylesheet">

<!-- Gridstack Js -->
<script src="../assets/plugins/jquery-ui/js/jquery-ui.js"></script>
<script src="../assets/plugins/gridstack/js/lodash.min.js"></script>
<script src="../assets/plugins/gridstack/js/gridstack.min.js"></script>
<script src="../assets/plugins/gridstack/js/gridstack.jQueryUI.min.js"></script>

Single Images

Use this code data-toggle="lightbox" to see image in lightbox popup.

Image Gallery

Add this code data-gallery="example-gallery" to see image gallery in lightbox popup.

Video Gallery

Add this code data-gallery="youtubevideos" to see videos in lightbox popup.

Mixin Gallery

Add this code data-gallery="mixedgallery" to see mixed gallery in lightbox popup. to use vimeo add code data-remote="vimeo url"

SOURCE

<!-- Lightbox css -->
<link href="../assets/plugins/ekko-lightbox/css/ekko-lightbox.min.css" rel="stylesheet">
<link href="../assets/plugins/lightbox2-master/css/lightbox.min.css" rel="stylesheet">

<!-- Lightbox Js -->
<script src="../assets/plugins/ekko-lightbox/js/ekko-lightbox.min.js"></script>
<script src="../assets/plugins/lightbox2-master/js/lightbox.min.js"></script>

Notification

Notification Alert

Notification color : data-type="inverse" Notification position : data-align="left"

Notification Position

Change data-type : data-type="inverse" to change notification color

Notification Behaviour

use code data-animation-in="animated fadeIn" data-animation-out="animated fadeOut" notification animation effect

SOURCE

<!-- Notification css -->
<link href="../assets/plugins/notification/css/notification.min.css" rel="stylesheet">

<!-- Notification Js -->
<script src="../assets/plugins/notification/js/bootstrap-growl.min.js"></script>

Pnotify

Notification Alert

Primary Notice		Use id `pnotify-default` to use this style notification
Primary Notice		Use id `pnotify-default` to use this style notification
Success Notice		Use id `pnotify-success` to use this style notification
Info Notice		Use id `pnotify-info` to use this style notification
Danger Notice		Use id `pnotify-danger` to use this style notification

Desktop Notifications

Success Notification		Use id `pnotify-desktop-success` to use this style notification
Info Notification		Use id `pnotify-desktop-info` to use this style notification
Warning Notification		Use id `pnotify-desktop-warning` to use this style notification
Danger Notification		Use id `pnotify-desktop-danger` to use this style notification

Notification Position

Top Left		Use id `pnotify-stack-top-left` to use this style notification
Bottom Left		Use id `pnotify-stack-bottom-left` to use this style notification
Bottom Right		Use id `pnotify-stack-bottom-right` to use this style notification
Custom Left		Use id `pnotify-stack-custom-left` to use this style notification
Custom Right		Use id `pnotify-stack-custom-right` to use this style notification
Custom Top		Use id `pnotify-stack-custom-top` to use this style notification
Custom Bottom		Use id `pnotify-stack-custom-bottom` to use this style notification

Notification Option

No Title		Use id `pnotify-no-title` to use this style notification
Rich Title		Use id `pnotify-rich` to use this style notification
Click to Close		Use id `pnotify-click` to use this style notification
Custom Button		Use id `pnotify-buttons` to use this style notification
Callback Button		Use id `pnotify-callbacks` to use this style notification
Progress Button		Use id `pnotify-progress` to use this style notification
Dynamic Progress Button		Use id `pnotify-dynamic` to use this style notification
Multiline Button		Use id `pnotify-multiline` to use this style notification
Prompt Button		Use id `pnotify-prompt` to use this style notification
Confirm Button		Use id `pnotify-confirm` to use this style notification
Stickey Button		Use id `pnotify-sticky` to use this style notification
Permenant Button		Use id `pnotify-permanent-buttons` to use this style notification

SOURCE

<!-- Pnotify css -->
<link href="../assets/plugins/pnotify/css/pnotify.custom.min.css" rel="stylesheet">
<link href="../assets/css/pages/pnotify.css" rel="stylesheet">

<!-- Pnotify Js -->
<script src="../assets/plugins/pnotify/js/pnotify.custom.min.js"></script>
<script src="../assets/plugins/pnotify/js/notify-event.js"></script>

Rating

1/10 Rating

Use id="example-1to10" to see default rating

Movie Rating

Use id="example-movie" to see movie rating

Square Rating

Use id="example-square" to see square rating

Pill Rating

Use id="example-pill" to see pill rating

Reverse Rating

Use id="example-reversed" to see reverse rating

Horizontal Rating

Use id="example-horizontal" to see horizontal rating

Font Awesome Rating

Use id="example-fontawesome" to see font awesome rating

CSS Stars Rating

Use id="example-css" to see css stars rating

Fractional Star Rating

Use id="example-fontawesome-o" to see fractional star rating

Current rating: 5.6

SOURCE

<!-- Rating css -->
<link href="../assets/plugins/ratting/css/bars-1to10.css" rel="stylesheet">
<link href="../assets/plugins/ratting/css/bars-horizontal.css" rel="stylesheet">
<link href="../assets/plugins/ratting/css/bars-movie.css" rel="stylesheet">
<link href="../assets/plugins/ratting/css/bars-pill.css" rel="stylesheet">
<link href="../assets/plugins/ratting/css/bars-reversed.css" rel="stylesheet">
<link href="../assets/plugins/ratting/css/bars-square.css" rel="stylesheet">
<link href="../assets/plugins/ratting/css/bootstrap-stars.css" rel="stylesheet">
<link href="../assets/plugins/ratting/css/css-stars.css" rel="stylesheet">
<link href="../assets/plugins/ratting/css/fontawesome-stars.css" rel="stylesheet">
<link href="../assets/plugins/ratting/css/fontawesome-stars-o.css" rel="stylesheet">

<!-- Rating Js -->
<script src="../assets/plugins/ratting/js/jquery.barrating.min.js"></script>

Range Slider

Basic example with custom formatter and colored selected region via CSS.

Range selector, options specified via data attribute.

Filter by price interval: € 10

€ 1000

Sliders can be enabled and disabled.

Enabled

Using events to work with the values and style the selection and handles via CSS. The tooltip is disabled and diferent shapes for the handles.

Vertical Slider with reversed values (largest to smallest).

Unusual tooltip positions

Destroy instance of slider by calling destroy() method on slider instance via JavaScript.

Able to bind to 'slide' JQuery event on slider, which is triggered whenever the slider is used.

Current Slider Value: 3

Tooltip can always be displayed.

Precision (number of places after the decimal) can be specified.

Setting custom handlers.

Using a custom step interval.

Coloring the low and high track segments.

Note that there is no low track on the single-value slider. The area to lesser than the value of the handle is the selection.

Using tick marks and labels.

$10

$20

$30

$40

Using tick marks at specific positions.

$10

$20

$30

$40

With a logarithmic scale.

Focus the slider handle after a value change.

Accessibility with ARIA labels

Auto-Register data-provide="slider" Elements

short

medium

long

Slider-Elements initially hidden

Show

Create an input element wth the data-provide="slider" attribute automatically turns it into a slider. Options can be supplied via data-slider- attributes.

short

medium

long

Highlight ranges on slider with rangeHighlights attribute 14

Using tick marks at specific positions..

SOURCE

<!-- Range Slider css -->
<link href="../assets/plugins/range-slider/css/bootstrap-slider.min.css" rel="stylesheet">
<link href="../assets/css/pages/rangeslider.css" rel="stylesheet">

<!-- Range Slider Js -->
<script src="../assets/plugins/range-slider/js/bootstrap-slider.min.js"></script>

Slider

Slider1

SOURCE

Only Nav

SOURCE

Only Dots

SOURCE

<!-- owlcarousel css -->
<link href="../assets/plugins/owl-carousel/css/owl.carousel.min.css" rel="stylesheet">
<link href="../assets/plugins/owl-carousel/css/owl.theme.default.min.css" rel="stylesheet">

<!-- owlcarousel Js -->
<script src="../assets/plugins/owl-carousel/js/owl.carousel.min.js"></script>

Syntax Highlighter

Basic Usage

The recommended way to mark up a code block (both for semantics and for Prism) is a <pre> element with a element <code> inside, like so:

Code:

<pre>
    <code class="language-css">
        p {
            color: #1abc9c
        }
    </code>
</pre>

Output:

p {
color: #1abc9c
}

SOURCE

HTML Markup

Use the following code to use HTML syntax highlighter.

Usage:

<pre>
    <code class="language-markup">
        HTML CODE ...
    </code>
</pre>

Example:

<div class="card">
    <div class="card-header">
        <h5>Hello card</h5>
        <span> lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
        <div class="card-header-right">
            <i class="icofont icofont-rounded-down"></i>
            <i class="icofont icofont-refresh"></i>
            <i class="icofont icofont-close-circled"></i>
        </div>
    </div>
    <div class="card-block">
        <p>
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
    </div>
</div>

SOURCE

CSS Markup

Use the following code to use HTML syntax highlighter.

Usage:

<pre>
    <code class="language-css">
        CSS CODE ...
    </code>
</pre>

Example:

a:active{
    color:#1abc9c;
}
p{
    font-size:13px;
}
.btn-primary{
    color: #1abc9c;
    background-color: #fff;
}
.label-primary {
    background-color: #1abc9c;
}
.badge-primary {
    background-color: #1abc9c;
}
.bg-primary {
    background-color: #1abc9c !important;
    color: #fff;
}
.panel-primary {
    border-color: #1abc9c;
}

SOURCE

Line Number

Line number at the beginning of code lines.

Obviously, this is supposed to work only for code blocks (<pre><code>) and not for inline code. Add class line-numbers to your desired <pre> and line-numbers plugin will take care.

Optional: You can specify the data-start (Number) attribute on the <pre> element. It will shift the line counter.

Usage:

<pre class="line-numbers">
    <code class="language-css">
        p {
            color: red;
        }

    </code>
</pre>

Example:

(function() {
    if (typeof self==='undefined' || !self.Prism || !self.document) {
        return;
    }
});

SOURCE

Line Highlight

Highlights specific lines and/or line ranges.

You specify the lines to be highlighted through the data-line attribute on the <pre> element, in the following simple format:

A single number refers to the line with that number
Ranges are denoted by two numbers, separated with a hyphen (-)
Multiple line numbers or ranges are separated by commas.
Whitespace is allowed anywhere and will be stripped off.

Usage:

<pre data-line="2,4, 8-10">
    <code class="language-css">
        p {
            color: red
        }
    </code>
</pre>

Example:

pre.line-numbers {
    position: relative;
    padding-left: 3.8em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.8em;
    width: 3em;
    /* works for line-numbers below 1000 lines */
    letter-spacing: -1px;
    border-right: 1px solid #999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

SOURCE

<!-- Prism css -->
<link href="../assets/plugins/prism/css/prism.min.css" rel="stylesheet">

<!-- Prism Js -->
<script src="../assets/plugins/prism/js/prism.min.js"></script>

Tree View

HTML Demo

Root node
- Child node 1
- Child node 2

Data Format Demo

Root node
- Child node 1
- Child node 2

Callback Function Data Demo

Root

Inline Data Demo

Root node

AJAX Demo

Loading ...

Lazy Loading Demo

Loading ...

Interaction and Events Demo

either click the button or a node in the tree

Root node

SOURCE

<!-- Jstree css -->
<link href="../assets/plugins/jstree/css/style.min.css" rel="stylesheet">

<!-- Jstree Js -->
<script src="../assets/plugins/jstree/js/jstree.min.js"></script>

Nestable

Item 1
Item 2
1. Item 3
2. Item 4
3. Item 5
  1. Item 6
  2. Item 7
  3. Item 8
4. Item 9
5. Item 10
Item 11
Item 12

Item 13
Item 14
Item 15
1. Item 16
2. Item 17
3. Item 18

Drag

Item 13
Drag

Item 14
Drag

Item 15
1. Drag
  
  Item 16
2. Drag
  
  Item 17
3. Drag
  
  Item 18

SOURCE

<!-- Nestable css -->
<link href="../assets/plugins/nestable-master/css/nestable.min.css" rel="stylesheet">

<!-- Nestable Js -->
<script src="../assets/plugins/nestable-master/js/jquery.nestable.js"></script>

Default Toolbar

Light Toolbar

Dark Toolbar

SOURCE

Colorful Toolbar

Primary Toolbar

Success Toolbar

Info Toolbar

Danger Toolbar

SOURCE

Position Toolbar

Top Toolbar

Left Toolbar

Bottom Toolbar

Right Toolbar

On click Toolbar

SOURCE

Animation Toolbar

Standard Toolbar

Flip Toolbar

Grow Toolbar

Fly in Toolbar

Bounce Toolbar

SOURCE

<!-- Toolbar css -->
<link href="../assets/plugins/toolbar/css/jquery.toolbar.css" rel="stylesheet">

<!-- Toolbar Js -->
<script src="../assets/plugins/toolbar/js/jquery.toolbar.min.js"></script>

Advance Components

Alert

Datepicker

Days of Week Disabled

Days of Week Highlighted

AutoClose

DatesDisabled

Toggle Active

Today Highlight

Calendar Weeks

Date Range

Grid Stack

Float Grid Demo

Drag me!

LightBox

Single Images

Image Gallery

Video Gallery

Mixin Gallery

Notification

Notification Alert

Notification Position

Notification Behaviour

Pnotify

Notification Alert

Desktop Notifications

Notification Position

Notification Option

Rating

1/10 Rating

Movie Rating

Square Rating

Pill Rating

Reverse Rating

Horizontal Rating

Font Awesome Rating

CSS Stars Rating

Fractional Star Rating

Range Slider

Basic example with custom formatter and colored selected region via CSS.

Range selector, options specified via data attribute.

Sliders can be enabled and disabled.

Using events to work with the values and style the selection and handles via CSS. The tooltip is disabled and diferent shapes for the handles.

Vertical Slider with reversed values (largest to smallest).

Unusual tooltip positions

Destroy instance of slider by calling destroy() method on slider instance via JavaScript.

Able to bind to 'slide' JQuery event on slider, which is triggered whenever the slider is used.

Tooltip can always be displayed.

Precision (number of places after the decimal) can be specified.

Setting custom handlers.

Using a custom step interval.

Coloring the low and high track segments.

Using tick marks and labels.

Using tick marks at specific positions.

With a logarithmic scale.

Focus the slider handle after a value change.

Accessibility with ARIA labels

Auto-Register data-provide="slider" Elements

Slider-Elements initially hidden

Create an input element wth the data-provide="slider" attribute automatically turns it into a slider. Options can be supplied via data-slider- attributes.

Highlight ranges on slider with rangeHighlights attribute 14

Using tick marks at specific positions..

Slider

Slider1

Only Nav

Only Dots

Syntax Highlighter

Basic Usage

Code:

Output:

HTML Markup

Usage:

Example:

CSS Markup

Usage:

Example:

Line Number

Usage:

Example:

Line Highlight