List of Components

Bootstrap Components

Button

Buttons are used in forms in the first place.

Style sheets linking occurs when the .btn primary class is present on the page.

Component example:

See more button examples on the following page: Buttons.

Markup example:

<button class="btn btn-primary btn-block">Button</button>

The component has predefined styles (class modifiers), each of which has its own semantic goal.

Color modifiers:

  • primary - .btn-primary, .btn-outline-primary
  • secondary - .btn-secondary, .btn-outline-secondary
  • success - .btn-success, .btn-outline-success
  • info - .btn-info, .btn-outline-info
  • warning - .btn-warning, .btn-outline-warning
  • danger - .btn-danger, .btn-outline-danger
  • light - .btn-light, .btn-outline-light
  • dark - .btn-dark, .btn-outline-dark

Size modifiers:

  • small button - .btn-sm
  • large button - .btn-lg

A modifier .btn-block makes a block out of a button. It occupies the full width of a parent element.

Active (:active) and disabled ([disabled]) states of a button are also provided. They can be artificially set using .active and .disabled classes correspondingly.

This component is a part of Bootstrap 4 framework. Read more about it on the following page: Bootstrap Buttons.

Badge

Badge is used as a small counter or label. Style sheets linking occurs when the .badge primary class is present on the page.

Component example:

Badge8

See more badge examples on the following page: Typography.

Markup example:

<span class="badge badge-primary">Badge</span>

The component has its own modifiers. Color modifiers:

  • primary - .badge-primary
  • secondary - .badge-secondary
  • success - .badge-success
  • info - .badge-info
  • warning - .badge-warning
  • danger - .badge-danger
  • light - .badge-light
  • dark - .badge-dark

Modifier .badge-pill makes a badge round.

This component is a part of Bootstrap 4 framework. Read more about it on the following page: Bootstrap Badges.

Code

Code component is a set of styles for changing the appearance of <code>, <kbd> and <pre> tags. In addition to <code> , there is a .code-bg class, which adds a background and inner paddings. Style sheets linking occurs when the <code> tag is present on the page.

This component is a part of Bootstrap 4 framework. Read more about it on the following page: Bootstrap Code.

Media Object

Media object is an object where an image is located next to the text content (message, tweet, post). Style sheets linking occurs when the .media primary class is present on the page.

Component example:

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.

Code example:

<div class="media">
  <img class="me-3" src=".../64x64" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla.
  </div>
</div>

This component is a part of Bootstrap 4 framework. Read more about it on the following page: Bootstrap Media Object.

Card

Card is a flexible and expandable container of content. It includes heading and footer options, a wide range of content, contextual background colors and powerful display options. Style sheets linking occurs when the .card primary class is present on the page.

Component example:

Card image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Code example:

<div class="card">
  <img class="card-img-top" src="https://via.placeholder.com/300x150/" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

This component is a part of Bootstrap 4 framework. Read more about it on the following page: Bootstrap Card.

Table

Table stylization component. Style sheets linking occurs when the .table primary class is present on the page.

Component example:

# First Last
1 Mark Otto
2 Jacob Thornton
3 Larry Bird

Code example:

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>Bird</td>
    </tr>
  </tbody>
</table>

This component is a part of Bootstrap 4 framework. Read more about it on the following page: Bootstrap Tables.

Progress

Progress bars components are built from two elements of HTML & CSS to set the width and several attributes. We do not use HTML5 <progress> element that allows us to place progress bars vertically as well as animate them and place text labels above them. Style sheets linking occurs when the .progress primary class is present on the page.

Component example:

Code example:

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

This component is a part of Bootstrap 4 framework. Read more about it on the following page: Bootstrap Progress.

Close

A common icon for hiding content, e.g. modal windows and notifications. Style sheets linking occurs when the .close primary class is present on the page.

Component example:

Code example:

<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

This component is a part of Bootstrap 4 framework. Read more about it on the following page: Bootstrap Close.

Alert

Alerts are used as feedback by certain actions of a user or other events. Style sheets linking occurs when the .alert primary class is present on the page.

Component example:

See more alert examples on the following page: Alerts.

Markup example:

<div class="alert alert-primary">
  Attention! This is a multi-purpose alert that's useful anywhere!
</div>

The component has predefined styles (class modifiers), each of which has its own semantic goal.

Color modifiers:

  • primary - .alert-primary
  • secondary - .alert-secondary
  • success - .alert-success
  • info - .alert-info
  • warning - .alert-warning
  • danger - .alert-danger
  • light - .alert-light
  • dark - .alert-dark

Modifiers of primary color brightening or darkening (incompatible with gradient modifier):

  • brightening - .alert-lighter
  • darkening - .alert-darker

Size modifiers:

  • small alert - .alert-sm
  • large alert - .alert-lg

Border modifiers:

  • left border - .alert-border-left
  • right border - .alert-border-right
  • top border - .alert-border-top
  • bottom border - .alert-border-bottom

.alert-gradient modifier makes a gradient background out of primary background.

This component is a part of Bootstrap 4 framework. Read more about it on the following page: Bootstrap Alerts.

Tooltip

Tooltip can be added to any markup element.

Plugin and style sheets linking occurs when an element with the [data-bs-toggle="tooltip"] attribute is present on the page.

Component example:

Markup example:

<button class="btn btn-primary" data-bs-toggle="tooltip">Tooltip</button>

This component is a part of Bootstrap 4 framework. Read more about it on the following page: Bootstrap Tooltips.

Jumbotron

A component designed for demonstration of website’s key content.

Style sheets linking occurs when the .jumbotron primary class is present on the page.

Component example:

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

Markup example:

<section class="jumbotron mt-2">
  <h1>Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-3">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p><a class="btn btn-primary mt-2" href="#">Learn more</a>
</section>

This component is a part of Bootstrap 4 framework. Read more about it on the following page: Bootstrap Jumbotron.

Input

Inputs are used in forms in the first place.

Style sheets linking occurs when the element that matches the .form-group, .input-group, .form-check, .custom-control, .form-control selector is present on the page.

Component example:

See more input examples on the following page: Basic Inputs.

Markup example:

<input class="form-control" type="text" placeholder="Type Here...">

This component is a part of Bootstrap 4 framework. Read more about it on the following page: Bootstrap Forms.

Plugins

Nprogress

Nprogress is a progress plugin, which is generally used to display loading of the page content. You can see an example of plugin operation on the following page: Page Progress Loader.

The plugin connects immediately after the page loading event (load). In case of an error during script execution on the page, the loading bar will become red (a .bar-danger class will be added).

For .bar loading bar, color modifiers are provided:

  • primary - .bar-primary
  • secondary - .bar-secondary
  • success - .bar-success
  • info - .bar-info
  • warning - .bar-warning
  • danger - .bar-danger
  • light - .bar-light
  • dark - .bar-dark

All available parameters of the plugin can be viewed in its GitHub repository.

Dual Listbox

Dual Listbox is an improved version of a simple choice field.

Plugin and style sheets linking occurs when the element that matches the .dual-listbox selector is present on the page.

Plugin operation example:

Markup example:

<select class="dual-listbox" multiple="" data-available-title="Available" data-selected-title="Selected">
  <option value="1">One</option>
  <option value="2">Two</option>
  ...
</select>

data-available-title and data-selected-title attributes are used for modifying the headings of available and selected items.

All available parameters of the plugin can be viewed in its GitHub repository.

Typeahead.js

Typeahead.js is a plugin for autofilling text fields.

Plugin and style sheets linking occurs when the element that matches the [data-typehead] selector is present on the page.

Plugin operation example:

Markup example:

<input class="form-control" type="text" placeholder="States" data-typehead='[
  "Alabama",
  "Alaska",
  "Arizona",
  "Arkansas",
  "California"
]'>

The data-typehead attribute is used to indicate autofilling options as a line array.

All available parameters of the plugin can be viewed in its GitHub repository.

jQuery UI Spinner

jQuery UI Spinner is a plugin for an improved input of numerical values in fields with up/down buttons that can be stylized.

Plugin and style sheets linking occurs when the element that matches the [data-spinner] selector is present on the page.

Plugin operation example:

See more plugin operation examples on the following page: Plugin Inputs.

Markup example:

<input class="form-control ui-spinner-input" data-spinner type="number" name="spinner" value="5">

This template provides a data-spinner attribute for Spinner that can accept a JSON object with the plugin parameters, e.g.:

<input ... data-spinner='{ "min": 0, "step": 5 }'>

All available parameters of the plugin can be viewed on jQuery UI website.

Date Range Picker

Date Range Picker is a plugin for choosing a time range with stylization feature.

Plugin and style sheets linking occurs when the element that matches the [name="daterange"] selector is present on the page.

Plugin operation example:

See more plugin operation examples on the following page: Plugin Inputs.

Markup example:

<input class="form-control" type="text" name="daterange">

This template provides a data-predefined attribute for Date Range Picker that allows to enable preset time ranges, such as:

  • Today
  • Yesterday
  • Last 7 Days
  • Last 30 Days
  • This Month
  • Last Month

Modifying time ranges can be done via the ranges parameter of a daterangepicker component initialization in components/base/script.js file.

All available parameters of the plugin can be viewed on Date Range Picker website.

Tags Manager

Tags Manager is a jQuery plugin for creating tag input fields.

Plugin and style sheets linking occurs when the element that matches the .tag-manager selector is present on the page.

Plugin operation example:

Markup example:

<div class="tag-manager">
  <input class="form-control tag-manager-input" type="text" placeholder="Create a new tag...">
  <div class="tag-manager-container"></div>
</div>

This template provides a data-tag-manager attribute for Tags Manager that can accept a JSON object with the plugin parameters, e.g.:

<div class="tag-manager" data-tag-manager='{ "prefilled": [ "admin", "template", "sample" ] }'>...</div>

tagManager component implies a mandatory availability of .tag-manager-input and .tag-manager-container elements in it.

All available parameters of the plugin can be viewed in its GitHub repository.

jQuery Masked Input

jQuery Masked Input is a plugin that allows to set a template of the input field value.

Plugin and style sheets linking occurs when the element that matches the [data-masked] selector is present on the page.

Plugin operation example:

See more plugin operation examples on the following page: Plugin Inputs.

Markup example:

<input class="form-control" type="text" data-masked="99/99/9999" placeholder="11/11/1111">

This template provides a data-masked attribute for jQuery Masked Input that accepts a string with an entered value template, e.g.:

<input ... data-masked="99/99/9999">

All available parameters of the plugin can be viewed in its GitHub repository.

Summernote

Summernote is a simple WYSIWYG editor based on Bootstrap.

Plugin and style sheets linking occurs when the element that matches the .summernote selector is present on the page.

Plugin operation example:

Hello summernote.

See more plugin operation examples on the following page: Editors.

Markup example:

<div class="summernote">Hello summernote.</div>

This template provides a data-summernote-opts attribute for Summernote that can accept a JSON object with the plugin parameters, e.g.:

<div class="summernote" data-summernote-opts='{ "airMode": true }'>...</div>

All available parameters of the plugin can be viewed on Summernote website.

Nestable jQuery Plugin

Nestable jQuery Plugin is an hierarchical list plugin with drag-and-drop elements.

Plugin and style sheets linking occurs when the element that matches the .nestable selector is present on the page.

Plugin operation example:

  1. Item 1
    1. Item 2
    2. Item 3
    3. Item 4

See more plugin operation examples on the following page: Nestable.

Markup example:

<div class="dd nestable">
  <ol class="dd-list">
    <li class="dd-item">
      <div class="dd-handle">Item 1</div>
      <ol class="dd-list">
        <li class="dd-item">
          <div class="dd-handle">Item 2</div>
        </li>
        <li class="dd-item">
          <div class="dd-handle">Item 3</div>
        </li>
        <li class="dd-item">
          <div class="dd-handle">Item 4</div>
        </li>
      </ol>
    </li>
  </ol>
</div>

All available parameters of the plugin can be viewed in its GitHub repository.

Cropper.js

Cropper.js is a plugin for cropping images.

Plugin and style sheets linking occurs when the element that matches the [data-cropper-container] selector is present on the page.

Plugin operation example:

Sample Picture

An extended example of plugin operation can be seen on the following page: Image Tools.

Markup example:

<div data-cropper-container>
  <div class="img-container"><img src="../../images/logo-300x300.png" alt="Sample Picture"></div>
  <button data-cropper='{ "setDragMode": "move" }'>Drag mode: move</button>
  <button data-cropper='{ "setDragMode": "crop" }'>Drag mode: crop</button>
  <button data-cropper='{ "zoom": 0.1 }'>Zoom: +0.1</button>
  <button data-cropper='{ "zoom": -0.1 }'>Zoom: -0.1</button>
  <button data-cropper='{ "reset": null }'>Reset</button>
</div>

cropper component implies a mandatory availability of an element matching the .img-container img selector.

The template provides a data-cropper attribute for managing the Cropper.js plugin. It accepts a JSON object with parameters matching methods of the plugin, and parameter values that will be passed to a method, e.g.: data-cropper='{ "setDragMode": "move" }' matches cropper.setDragMode( 'move' ). This attribute works only with the elements that are located in a data-cropper-container container.

Next values of a data-cropper attribute that apply to buttons are provided:

  • { "setDragMode": "move" }
  • { "setDragMode": "crop" }
  • { "zoom": 0.1 }
  • { "zoom": -0.1 }
  • { "rotate": -45 }
  • { "rotate": 45 }
  • { "scaleX": -1 }
  • { "scaleY": -1 }
  • { "disable": null }
  • { "enable": null }
  • { "clear": null }
  • { "reset": null }
  • { "destroy": null }
  • { "setAspectRatio": 1.7777777777777777 }
  • { "setAspectRatio": 1.3333333333333333 }
  • { "setAspectRatio": 1 }
  • { "setAspectRatio": 0.6666666666666666 }
  • { "setAspectRatio": null }
  • { "viewMode": 0 }
  • { "viewMode": 1 }
  • { "viewMode": 2 }
  • { "viewMode": 3 }
  • { "getCroppedCanvas": { maxWidth: 4096, maxHeight: 4096 }, target: "#modal" }
  • { "getCroppedCanvas": { width: 160, height: 90 }, target: "#modal" }
  • { "getCroppedCanvas": { width: 320, height: 180 }, target: "#modal" }
  • { "getData": null, target: "#cropper-input" }
  • { "setData": null, target: "#cropper-input" }
  • { "getContainerData": null, target: "#cropper-input" }
  • { "getImageData": null, target: "#cropper-input" }
  • { "getCanvasData": null, target: "#cropper-input" }
  • { "setCanvasData": null, target: "#cropper-input" }
  • { "getCropBoxData": null, target: "#cropper-input" }
  • { "setCropBoxData": null, target: "#cropper-input" }

Next values of a data-cropper attribute that apply to checkboxes are provided:

  • { "responsive": "checkbox" }
  • { "restore": "checkbox" }
  • { "checkCrossOrigin": "checkbox" }
  • { "checkOrientation": "checkbox" }
  • { "modal": "checkbox" }
  • { "guides": "checkbox" }
  • { "center": "checkbox" }
  • { "highlight": "checkbox" }
  • { "background": "checkbox" }
  • { "autoCrop": "checkbox" }
  • { "movable": "checkbox" }
  • { "rotatable": "checkbox" }
  • { "scalable": "checkbox" }
  • { "zoomable": "checkbox" }
  • { "zoomOnTouch": "checkbox" }
  • { "zoomOnWheel": "checkbox" }
  • { "cropBoxMovable": "checkbox" }
  • { "cropBoxResizable": "checkbox" }
  • { "toggleDragModeOnDblclick": "checkbox" }

All available plugin parameters and their description can be viewed in GitHub repository.

EasyZoom

EasyZoom is a jQuery plugin for zooming and panning images.

Plugin and style sheets linking occurs when the element that matches the .easyzoom selector is present on the page.

Plugin operation example:

An additional example of plugin operation is available on the following page: Image Tools.

Markup example:

<div class="easyzoom easyzoom--overlay">
  <a href="../../images/img-01-1440x660.jpg">
    <img src="../../images/img-01-720x330.jpg" alt="">
  </a>
</div>

All available parameters of the plugin can be viewed in its GitHub repository.

Slick Slider

Slick Slider is a jQuery plugin for creating a content carousel.

Plugin and style sheets linking occurs when the element that matches the .slick-slider selector is present on the page.

Plugin operation example:

1

2

3

4

5

6

See more plugin operation examples on the following page: Content Sliders.

Markup example:

<div class="slick-slider">
  <div><div class="slide-content">...</div></div>
  ...
  <div><div class="slide-content">...</div></div>
</div>

This template provides a data-slick attribute for Slick Slider that can accept a JSON object with the plugin parameters, e.g.:

<div class="slick-slider" data-slick='{"dots":true,"arrows":true}'>...</div>

Also, there are attributes for specifying the carousel responsiveness according to breakpoints:

  • data-slick-sm - 576px
  • data-slick-md - 768px
  • data-slick-lg - 992px
  • data-slick-xl - 1200px
  • data-slick-xxl - 1600px

An example with responsive attributes:

<div class="slick-slider" data-slick='{"dots":true,"arrows":true}' data-slick-sm='{"arrows":false}'>...</div>

All available parameters of the plugin can be viewed on Slick Slider website.

PNotify

PNotify is a notification plugin. The plugin and style sheets connect immediately after the page loading event (window load).

Plugin operation example:

More examples are available on the following page: Notifications. The plugin is configured globally in the pnotify component initialization, in components/base/script.js file.

All available parameters of the plugin can be viewed in its GitHub repository.

Particles.js

Particles.js is a plugin for creating canvas with moving particles.

Plugin and style sheets linking occurs when the element that matches the #particles-container selector is present on the page.

An example of plugin operation is available on the following page: 404.

This template provides a data-particles attribute for Particles.js that can accept a JSON object with the plugin parameters, e.g.:

<div id="particles-container" data-particles='{ "color": { "value": "#85e2ff" } }'>...</div>

All available parameters of the plugin can be viewed in its GitHub repository.

jVectorMap

jVectorMap is jQuery plugin for creating vector maps.

Plugin and style sheets linking occurs when the element that matches the .jvector-map-wrap selector is present on the page.

An example of map operation is available on the following page: jVectorMap.

This template provides a data-jvector-map attribute for jVectorMap that can accept a JSON object with the vector map.

You can read detailed information about this plugin on jVectorMap official website.

RD Navbar

RD Navbar is a jQuery plugin for creating a navigation panel.

Plugin and style sheets linking occurs when the element that matches the .rd-navbar selector is present on the page.

An example of plugin operation is available on the following page: Navbar.

An example of the simplest markup:

<div class="rd-navbar-wrap">
  <nav class="rd-navbar">
    <ul class="rd-navbar-nav">
      <li class="rd-navbar-nav-item"><a class="rd-navbar-link"></a></li>
      <li class="rd-navbar-nav-item"><a class="rd-navbar-link"></a></li>
      <li class="rd-navbar-nav-item"><a class="rd-navbar-link"></a></li>
      <li class="rd-navbar-nav-item"><a class="rd-navbar-link"></a></li>
    </ul>
  </nav>
</div>

All RD Navbar parameters are configured only in initialization.

All available parameters of the plugin can be viewed on RD Navbar website.

Highlight.js

Highlight.js is a tool for highlighting the code syntax.

Plugin linking occurs when the element that matches the .highlight selector is present on the page.

Plugin operation example:

<div class="container">
  <div class="row">
    <div class="col-md-4 col-lg-6">Your Column1 Content</div>
    <div class="col-md-4 col-lg-6">Your Column1 Content</div>
  </div>
</div>

Markup example:

<pre class="highlight html">
  ...
</pre>

All available parameters of the plugin can be viewed in its GitHub repository.

Bootstrap Maxlength

Bootstrap Maxlength is used for displaying maximum acceptable symbol length in a text field.

Plugin and style sheets linking occurs when the element that matches the [maxlength] selector is present on the page.

Plugin operation example:

See more plugin operation examples on the following page: Plugin Inputs.

Markup example:

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

All available parameters of the plugin can be viewed in its GitHub repository.

Select2

Select2 is an improved select field that can be stylized.

Plugin and style sheets linking occurs when the element that matches the .select2 selector is present on the page.

Plugin operation example:

See more plugin operation examples on the following page: Plugin Inputs.

Markup example:

<select class="select2" name="country" data-placeholder="Country">
  <option label="placeholder"></option>
  <option>USA</option>
  <option>UK</option>
  <option>Ukraine</option>
  <option>Australia</option>
  <option>Korea</option>
  <option>Japan</option>
  <option>Germany</option>
  <option>Belarus</option>
  <option>Poland</option>
</select>

This template provides the following attributes for Select2:

  • data-placeholder - generated field placeholder;
  • data-minimum-results-search - minimal amount of displayed options;
  • data-container-class - additional class for content of a generated component;
  • data-dropdown-class - additional class for a dropdown of the generated component.

All available parameters of the plugin can be viewed in its GitHub repository.

Time Spinner

Time Spinner is a modified jQuery UI Spinner for specifying time.

Plugin and style sheets linking occurs when the element that matches the [data-time-spinner] selector is present on the page.

Plugin operation example:

Markup example:

<input class="form-control ui-spinner-input" data-time-spinner type="text" name="spinner" value="08:30 PM">

Bootstrap Date/Timepicker

Bootstrap Date/Timepicker is a plugin for choosing date and time with stylization feature.

Plugin and style sheets linking occurs when the element that matches the [data-datetimepicker] selector is present on the page.

Plugin operation example:

See more plugin operation examples on the following page: Plugin Inputs.

Markup example:

<input class="form-control" type="text" name="datetime" data-datetimepicker>

This template provides a data-datetimepicker attribute for Bootstrap Date/Timepicker that can accept a JSON object with the plugin parameters, e.g.:

<input ... data-datetimepicker='{ "format": "LT", "inline": true, "target": "#time3" }'>

inline: true parameter in data-datetimepicker attribute implies a mandatory availability of target parameter with field selector, where the value will be written.

All available parameters of the plugin can be viewed on Bootstrap Date/Timepicker website.

CKeditor

CKeditor is a set of wise WYSIWYG editor components.

Plugin and style sheets linking occurs when the element that matches the [data-ckeditor] selector is present on the page.

Plugin operation example:

See more plugin operation examples on the following page: Editors.

Markup example:

<textarea data-ckeditor name="ckeditor">This is the CKEditor Plugin...</textarea>

To specify the editor type, a data-ckeditor attribute with acceptable values is used.

  • inline
  • balloon
  • document

All available parameters of the plugin can be viewed on CKeditor website.

Markdown.js

Markdown.js is a converter and editor of Markdown markup.

Plugin and style sheets linking occurs when the element that matches the .markdown selector is present on the page.

Plugin operation example:

This is the Markdown Editor! Check out my sweet preview below!

See more plugin operation examples on the following page: Editors.

Markup example:

<div class="markdown">This is the Markdown Editor! Check out my sweet preview below!</div>

This template provides a data-markdown-params attribute for Markdown.js that can accept a JSON object with the plugin parameters, e.g.:

<div class="markdown" data-markdown-params='{ "footer": "Footer Sample" }'>...</div>

All available parameters of the plugin can be viewed in its GitHub repository.

jsTree

jsTree is a jQuery plugin that provides an interactive tree structure of anything.

Plugin and style sheets linking occurs when the element that matches the .jstree selector is present on the page.

Plugin operation example:

  • Node 1
  • Folder 1
    • Node 2.1
    • Node 2.2

See more plugin operation examples on the following page: Treeview.

Markup example:

<div class="jstree">
  <ul>
    <li>Node 1</li>
    <li>Folder 1
      <ul>
        <li>Node 2.1</li>
        <li>Node 2.2</li>
      </ul>
    </li>
  </ul>
</div>

This template provides a data-jstree-params attribute for jsTree that can accept a JSON object with the plugin parameters, e.g.:

<div class="jstree" data-jstree-params='{ "plugins": [ "checkbox" ] }'>...</div>

All available parameters of the plugin can be viewed on jsTree website.

Tower File Input

Tower File Input is a jQuery plugin, which is an improved version of a file field with a feature of image preview.

Plugin and style sheets linking occurs when the element that matches the .tower-file-input selector is present on the page.

Plugin operation example:

An additional example of plugin operation is available on the following page: Image Tools.

Markup example:

<div class="tower-file">
  <input class="tower-file-input" id="file1" type="file">
  <label class="btn btn-success" for="file1">Select File</label>
</div>

This template provides a data-tfi-opts attribute for File Input that can accept a JSON object with the plugin parameters, e.g.:

<input class="tower-file-input" data-tfi-opts='{ "iconClass": "mdi-upload" }' ...>

All available parameters of the plugin can be viewed in its GitHub repository or on Tower File Input website.

xZoom

xZoom is a jQuery plugin for zooming images.

Plugin and style sheets linking occurs when the element that matches the .xzoom selector is present on the page.

Plugin operation example:

See more plugin operation examples on the following page: Image Tools.

Markup example:

<img class="xzoom" src="../../images/img-01-720x330.jpg" data-xoriginal="images/img-01-1440x660.jpg" alt="">

This template provides a data-xzoom-opts attribute for xZoom that can accept a JSON object with the plugin parameters, e.g.:

<img ... data-xzoom-opts='{ "position": "lens", "zoomWidth": 300, "zoomHeight": 300 }'>

All available parameters of the plugin can be viewed in its GitHub repository.

DropzoneJS

DropzoneJS is an open-source library that allows to drag and drop files with a feature of image preview.

Plugin and style sheets linking occurs when the element that matches the .dropzone-form selector is present on the page.

Plugin operation example:

Drop Files Here (or click)

An additional example of plugin operation is available on the following page: Uploaders.

Markup example:

<form class="dropzone-form" action="../dropzone/dropzone.php">Drop Files Here (or click)</form>

This template provides a data-dropzone attribute for DropzoneJS that can accept a JSON object with the plugin parameters, e.g.:

<form class="dropzone-form " action="../dropzone/dropzone.php" data-dropzone='{ "maxFilesize": 2,"maxfiles": 10 }'>...</form>

A components/dropzone/dropzone.php file is provided exclusively for demonstration of plugin operation.

All available parameters of the plugin can be viewed on DropzoneJS website.

Driver.js

Driver.js is a plugin for focusing an object on the page. This plugin allows to implement the site tour feature on any page.

Plugin and style sheets linking occurs when the element that matches the [data-driver] selector is present on the page.

Plugin operation example:

An additional example of plugin operation is available on the following page: Site Tour.

This template provides a data-driver attribute for Driver.js that can accept a JSON object with the plugin parameters, e.g.:

<div ... data-driver='{ "title": "Click Next", "description": "...", "position": "top" }'>...</div>

An attribute can be added to any visible element on the page. The site tour starts automatically 3 seconds after the page loads or on pressing the element with the data-driver-start attribute if it’s present on the page. The site tour elements are highlighted as they are shown in the document.

All available parameters of the plugin can be viewed on Driver.js website.

αCounter & αProgressCircle

αCounter is a simple plugin of an animated counter.

αProgressCircle is a plugin for radial progress bar.

Plugins and style sheets linking occurs when the element that matches the .progress-circle-wrap selector is present on the page.

Both plugins are used together to create a counter with an animated progress bar.

Plugin operation example:

67

Markup example:

<div class="progress-circle-wrap">  <div class="progress-counter-wrap">    <div class="progress-counter-value">      <span class="progress-counter">80</span>    </div>  </div>  <svg class="progress-circle" x="0" y="0" width="160" height="160" viewbox="0 0 160 160">    <circle class="bg" cx="80" cy="80" r="66"></circle>    <circle class="fg clipped" cx="80" cy="80" r="66" style="stroke: #28a745"></circle>  </svg></div>

Text from the .progress-counter element is used as a value for calculation.

All available plugin parameters can be viewed in their GitHub repository.

Lightgallery

Lightgallery is a jQuery plugin for creating a gallery.

Plugin and style sheets linking occurs when the element that matches the [data-lightgallery] selector is present on the page.

Plugin operation example:

See more plugin operation examples on the following page: Gallery.

Markup example:

<div class="d-sm-flex group-10" data-lightgallery>
  <a class="lightgallery-item" href="https://via.placeholder.com/800x600">
    <img src="https://via.placeholder.com/140x90" alt="">
  </a>
  <a class="lightgallery-item" href="https://via.placeholder.com/800x600">
    <img src="https://via.placeholder.com/140x90" alt="">
  </a>
  <a class="lightgallery-item" href="https://via.placeholder.com/800x600">
    <img src="https://via.placeholder.com/140x90" alt="">
  </a>
</div>

This template provides a data-lightgallery attribute for Lightgallery that can accept a JSON object with the plugin parameters, e.g.:

<div data-lightgallery='{ "thumbnail": false }'>...</div>

All available parameters of the plugin can be viewed in its GitHub repository.

Flot

Flot is a library of canvas-graphs.

Plugin and style sheets linking occurs when the element that matches the .flotchart-container selector is present on the page.

Plugin operation examples are available on the following page: Flotcharts.

This template provides a data-flotchart-options attribute for Flot that can accept a JSON object with the plugin parameters, and data-flotchart-data that accepts a JSON object with graphic data:

<div class="flotchart-container" data-flotchart-options="{...}" data-flotchart-data="{ ... }">...</div>

All available parameters of the plugin can be viewed on Flotcharts website.

Highcharts

Highcharts is a library of SVG graphs

Plugin and style sheets linking occurs when the element that matches the .highcharts-container selector is present on the page.

Plugin operation examples are available on the following page: Highcharts.

This template provides a data-highcharts-options attribute for Highcharts that can accept a JSON object with the plugin parameters, e.g.:

<div class="highcharts-container" data-highcharts-options="{...}">...</div>

All available parameters of the plugin can be viewed on Highcharts website.

αCountdown

αCountdown is a customizable plugin for a countdown with progress circles

Plugin and style sheets linking occurs when the element that matches the .countdown selector is present on the page.

Plugin operation example:

00
days
00
hours
00
minutes
00
seconds

Markup example:

<div class="countdown">
  <div class="countdown-block">
    <svg class="countdown-circle" x="0px" y="0px" width="100px" height="100px" viewbox="0 0 100 100" data-progress-days>
      <circle class="clipped" cx="50" cy="50" r="50" ></circle>
    </svg>
    <h1 class="countdown-counter" data-counter-days>00</h1>
  </div>
  <div class="countdown-block">
    <svg class="countdown-circle" x="0px" y="0px" width="100px" height="100px" viewbox="0 0 100 100" data-progress-hours>
      <circle class="clipped" cx="50" cy="50" r="50" ></circle>
    </svg>
    <h1 class="countdown-counter" data-counter-hours>00</h1>
  </div>
  <div class="countdown-block">
    <svg class="countdown-circle" x="0px" y="0px" width="100px" height="100px" viewbox="0 0 100 100" data-progress-minutes>
      <circle class="clipped" cx="50" cy="50" r="50" ></circle>
    </svg>
    <h1 class="countdown-counter" data-counter-minutes>00</h1>
  </div>
  <div class="countdown-block">
    <svg class="countdown-circle" x="0px" y="0px" width="100px" height="100px" viewbox="0 0 100 100" data-progress-seconds>
      <circle class="clipped" cx="50" cy="50" r="50" ></circle>
    </svg>
    <h1 class="countdown-counter" data-counter-seconds="">00</h1>
  </div>
</div>

This template provides the following attributes for αCountdown:

  • data-from - countdown start time (format YYYY-MM-DDTHH:mm:ss.sssZ)
  • data-to - countdown finish time (format YYYY-MM-DDTHH:mm:ss.sssZ)
  • data-count - countdown format (until, since, auto)

For example:

<div class="countdown" data-from="1995-12-17T03:24:00" data-to="2050-01-01" data-count="auto">...</div>

All available parameters of the plugin can be viewed in its GitHub repository.

MultiSwitch

MultiSwitch is a plugin for creating groups of class switches.

Plugin and style sheets linking occurs when the element that matches the [data-multi-switch] selector is present on the page.

Plugin operation example:

Markup example:

<button ... data-multi-switch='{ "targets": ".target" }'>...</button>

This template provides a data-multi-switch attribute for MultiSwitch that can accept a JSON object with the plugin parameters, e.g.:

<button ... data-multi-switch='{ "targets": ".sidebar", "scope": ".sidebar", "isolate": "[data-multi-switch]" }'>...</button>

All available parameters of the plugin can be viewed in its GitHub repository.

Right Sidebar Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat ac tortor eu viverra. Etiam ipsum neque, fermentum quis sagittis nec, hendrerit id diam. Mauris a tincidunt odio. Sed porttitor ex pulvinar, tristique sapien sed, malesuada nunc.

Navbar Themes