Advance Components


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


Days of Week Disabled
Days of Week Highlighted
Toggle Active
Today Highlight
Calendar Weeks
Date Range
                    <!-- 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
Add Widget

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

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

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


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


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

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.

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

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


Only Nav
Only Dots
                    <!-- 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 class="language-css">
                                            p {
                                                color: #1abc9c
p {
color: #1abc9c
HTML Markup

Use the following code to use HTML syntax highlighter.

                                        <code class="language-markup">
                                            HTML CODE ...
                                    <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 class="card-block">
                                                "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."
CSS Markup

Use the following code to use HTML syntax highlighter.

                                        <code class="language-css">
                                            CSS CODE ...
                                        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;
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.

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

                                    (function() {
                                        if (typeof self==='undefined' || !self.Prism || !self.document) {
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:

  1. A single number refers to the line with that number
  2. Ranges are denoted by two numbers, separated with a hyphen (-)
  3. Multiple line numbers or ranges are separated by commas.
  4. Whitespace is allowed anywhere and will be stripped off.
                                    <pre data-line="2,4, 8-10">
                                        <code class="language-css">
                                            p {
                                                color: red
                                    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;
                    <!-- 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


  • Root node
    • Child node 1
    • Child node 2
Data Format Demo

Callback Function Data Demo

Inline Data Demo


Lazy Loading Demo

Interaction and Events Demo

either click the button or a node in the tree
                    <!-- 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>


  1. Item 1
  2. 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
  3. Item 11
  4. Item 12
  1. Item 13
  2. Item 14
  3. Item 15
    1. Item 16
    2. Item 17
    3. Item 18
  1. Drag
    Item 13
  2. Drag
    Item 14
  3. Drag
    Item 15
    1. Drag
      Item 16
    2. Drag
      Item 17
    3. Drag
      Item 18
                    <!-- 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

Colorful Toolbar
Primary Toolbar

Success Toolbar

Info Toolbar

Danger Toolbar

Position Toolbar
Top Toolbar

Left Toolbar

Bottom Toolbar

Right Toolbar

On click Toolbar

Animation Toolbar
Standard Toolbar

Flip Toolbar

Grow Toolbar

Fly in Toolbar

Bounce Toolbar

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