Back to home

# Documentation

Thank you for purchasing LibertyUI template.

#### Introduction

LibertyUI is a responsive HTML template that is based on the CSS framework Bootstrap 4 and it is built with Sass. Sass compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or Sass, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of LibertyUI and provide a consistent look throughout the template.

Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.

Note: We are trying our best to document how to use the template. If you think that something is missing from the documentation, please do not hesitate to tell us about it. If you have any questions or problems with this theme please use Envato Marketplace contact form on our profile or email us at

support@urbanui.com

#### Getting started

You can directly use the compiled and ready to use the version of the template. But in case you plan to customize the template extensively the template allows you to do so! The Customization section will get you initiated on this.

The downloaded package will have the following structure.

LibertyUI/ ├── css/ ├── fonts/ ├── images/ ├── js/ ├── pages/ ├── partials/ ├── scss/ ├── vendors/ ├── gulpfile.js ├── package.json ├── index.html ├── CHANGELOG.md

The vendor files are added as npm packages for reducing the file sizes and easier version update of the vendors.

In order to access the properties of vendors, you have to just run two commands and all the vendor files are inside your node_modules folder!.

Though we have bundled up the vendor files needed for demo purpose into a folder 'vendors', you may not need all those vendors in your application. If you want to make any change in the vendor package files, you need to change the src path for related tasks in the file gulpfile.js and run the task "bundleVendors" to rebuild the vendor files.

To do this, you must have node and npm installed in your computer.

Installation guide of node can be found here. As npm comes bundled with node, separate installation of npm is not needed.

If you have already installed them, just navigate to the root folder and run the following command.

npm install

You can see that a folder node_modules is generated in your root folder with all vendor files!

#### Customization

In case you plan to customize the template extensively, you can make changes to the SCSS files. We use the gulp task manager for the build processes. Gulp will watch for changes to the SCSS files and automatically compile the files to CSS. For this, you need to install Gulp. Use of this tool is completely optional and only required if you want to modify the SCSS files.

##### Dependencies

To get started you will need to install the following item:

- Gulp - for task management.

Gulp

Getting started with Gulp is pretty simple. The Gulp site is a great place to get information on installing Gulp if you need more information.

You need to first install Gulp-cli in your machine using the below command.

npm install -g gulp-cli

This installs Gulp-cli globally to your machine.

Local installation of Gulp in the project will be done automatically when you complete the steps in getting started section. The other thing that Gulp requires, which, is really what does all the work, is the gulpfile.js. In this file, you set up all of your tasks that you will run.

Don't worry. We have this file already created for you!

#### Compilation

Before you start modifying the SCSS files, make sure that you go to the root folder of the template and run the following command:

gulp serve

This will start the file watch by gulp and whenever a file is modified, the SCSS files will be compiled to create the CSS file.

#### Basic structure

The below snippet shows the basic HTML structure of LibertyUI. Please note that all the stylesheets and script files in the below snippet should be included to render LibertyUI styles.

<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>LibertyUI Premium Bootstrap Admin Dashboard Template</title> <!-- plugins:css --> <link rel="stylesheet" href="../vendors/iconfonts/mdi/css/materialdesignicons.min.css"> <link rel="stylesheet" href="../vendors/css/vendor.bundle.base.css"> <link rel="stylesheet" href="../vendors/css/vendor.bundle.addons.css"> <!-- endinject --> <!-- plugin css for this page --> <!-- End plugin css for this page --> <!-- inject:css --> <link rel="stylesheet" href="../css/style.css"> <!-- endinject --> <link rel="shortcut icon" href="images/favicon.png" /> </head> <body> <div class="container-scroller"> <!-- partial:../partials/_horizontal-navbar.html --> <nav class="navbar horizontal-layout col-lg-12 col-12 p-0"> <div class="container d-flex flex-row"> <div class="text-center navbar-brand-wrapper d-flex align-items-top"> <a class="navbar-brand brand-logo" href="../index.html"><img src="../images/logo-inverse.svg" alt="logo"/></a> <a class="navbar-brand brand-logo-mini" href="../index.html"><img src="../images/logo-mini.svg" alt="logo"/></a> </div> <div class="navbar-menu-wrapper d-flex align-items-center"> <form class="search-field ml-auto" action="#"> <div class="form-group mb-0"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="mdi mdi-magnify"></i></span> </div> <input type="text" class="form-control"> </div> </div> </form> <ul class="navbar-nav navbar-nav-right mr-0"> <li class="nav-item dropdown ml-4"> <a class="nav-link count-indicator dropdown-toggle" id="notificationDropdown" href="#" data-toggle="dropdown"> <i class="mdi mdi-bell-outline"></i> <span class="count bg-warning">4</span> </a> <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="notificationDropdown"> <a class="dropdown-item py-3"> <p class="mb-0 font-weight-medium float-left">You have 4 new notifications </p> <span class="badge badge-pill badge-inverse-info float-right">View all</span> </a> <div class="dropdown-divider"></div> <a class="dropdown-item preview-item"> <div class="preview-thumbnail"> <div class="preview-icon bg-inverse-success"> <i class="mdi mdi-alert-circle-outline mx-0"></i> </div> </div> <div class="preview-item-content"> <h6 class="preview-subject font-weight-normal text-dark mb-1">Application Error</h6> <p class="font-weight-light small-text mb-0"> Just now </p> </div> </a> <div class="dropdown-divider"></div> <a class="dropdown-item preview-item"> <div class="preview-thumbnail"> <div class="preview-icon bg-inverse-warning"> <i class="mdi mdi-comment-text-outline mx-0"></i> </div> </div> <div class="preview-item-content"> <h6 class="preview-subject font-weight-normal text-dark mb-1">Settings</h6> <p class="font-weight-light small-text mb-0"> Private message </p> </div> </a> <div class="dropdown-divider"></div> <a class="dropdown-item preview-item"> <div class="preview-thumbnail"> <div class="preview-icon bg-inverse-info"> <i class="mdi mdi-email-outline mx-0"></i> </div> </div> <div class="preview-item-content"> <h6 class="preview-subject font-weight-normal text-dark mb-1">New user registration</h6> <p class="font-weight-light small-text mb-0"> 2 days ago </p> </div> </a> </div> </li> <li class="nav-item dropdown d-none d-xl-inline-block"> <a class="nav-link dropdown-toggle" id="UserDropdown" href="#" data-toggle="dropdown" aria-expanded="false"> <img class="img-xs rounded-circle" src="https://placehold.it/100x100" alt="Profile image"> </a> <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="UserDropdown"> <a class="dropdown-item p-0"> <div class="d-flex border-bottom"> <div class="py-3 px-4 d-flex align-items-center justify-content-center"><i class="mdi mdi-bookmark-plus-outline mr-0 text-gray"></i></div> <div class="py-3 px-4 d-flex align-items-center justify-content-center border-left border-right"><i class="mdi mdi-account-outline mr-0 text-gray"></i></div> <div class="py-3 px-4 d-flex align-items-center justify-content-center"><i class="mdi mdi-alarm-check mr-0 text-gray"></i></div> </div> </a> <a class="dropdown-item mt-2"> Manage Accounts </a> <a class="dropdown-item"> Change Password </a> <a class="dropdown-item"> Check Inbox </a> <a class="dropdown-item"> Sign Out </a> </div> </li> </ul> <button class="navbar-toggler align-self-center" type="button" data-toggle="minimize"> <span class="mdi mdi-menu"></span> </button> </div> </div> <div class="nav-bottom"> <div class="container"> <ul class="nav page-navigation"> <li class="nav-item"> <a href="../index.html" class="nav-link"><i class="link-icon mdi mdi-television"></i><span class="menu-title">DASHBOARD</span></a> </li> <li class="nav-item"> <a href="../pages/widgets.html" class="nav-link"><i class="link-icon mdi mdi-apple-safari"></i><span class="menu-title">WIDGETS</span></a> </li> <li class="nav-item mega-menu"> <a href="#" class="nav-link"><i class="link-icon mdi mdi-atom"></i><span class="menu-title">UI ELEMENTS</span><i class="menu-arrow"></i></a> <div class="submenu"> <div class="col-group-wrapper row"> <div class="col-group col-md-4"> <div class="row"> <div class="col-12"> <p class="category-heading">Basic Elements</p> </div> <div class="col-md-6"> <ul class="submenu-item"> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/accordions.html">Accordion</a></li> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/buttons.html">Buttons</a></li> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/badges.html">Badges</a></li> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/breadcrumbs.html">Breadcrumbs</a></li> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/dropdowns.html">Dropdown</a></li> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/modals.html">Modals</a></li> </ul> </div> <div class="col-md-6"> <ul class="submenu-item"> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/progress.html">Progress bar</a></li> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/pagination.html">Pagination</a></li> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/tabs.html">Tabs</a></li> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/typography.html">Typography</a></li> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/tooltips.html">Tooltip</a></li> </ul> </div> </div> </div> <div class="col-group col-md-4"> <div class="row"> <div class="col-12"> <p class="category-heading">Advanced Elements</p> </div> <div class="col-md-6"> <ul class="submenu-item"> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/dragula.html">Dragula</a></li> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/carousel.html">Carousel</a></li> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/clipboard.html">Clipboard</a></li> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/context-menu.html">Context Menu</a></li> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/loaders.html">Loader</a></li> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/slider.html">Slider</a></li> </ul> </div> <div class="col-md-6"> <ul class="submenu-item"> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/tour.html">Tour</a></li> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/popups.html">Popup</a></li> <li class="nav-item"><a class="nav-link" href="../pages/ui-features/notifications.html">Notification</a></li> </ul> </div> </div> </div> <div class="col-group col-md-2"> <p class="category-heading">Table</p> <ul class="submenu-item"> <li class="nav-item"><a class="nav-link" href="../pages/tables/basic-table.html">Basic Table</a></li> <li class="nav-item"><a class="nav-link" href="../pages/tables/data-table.html">Data Table</a></li> <li class="nav-item"><a class="nav-link" href="../pages/tables/js-grid.html">Js-grid</a></li> <li class="nav-item"><a class="nav-link" href="../pages/tables/sortable-table.html">Sortable Table</a></li> </ul> </div> <div class="col-group col-md-2"> <p class="category-heading">Icons</p> <ul class="submenu-item"> <li class="nav-item"><a class="nav-link" href="../pages/icons/flag-icons.html">Flag Icons</a></li> <li class="nav-item"><a class="nav-link" href="../pages/icons/font-awesome.html">Font Awesome</a></li> <li class="nav-item"><a class="nav-link" href="../pages/icons/simple-line-icon.html">Simple Line Icons</a></li> <li class="nav-item"><a class="nav-link" href="../pages/icons/themify.html">Themify Icons</a></li> </ul> </div> </div> </div> </li> <li class="nav-item mega-menu"> <a href="#" class="nav-link"><i class="link-icon mdi mdi-flag-outline"></i><span class="menu-title">PAGES</span><i class="menu-arrow"></i></a> <div class="submenu"> <div class="col-group-wrapper row"> <div class="col-group col-md-3"> <p class="category-heading">User Pages</p> <ul class="submenu-item"> <li class="nav-item"><a class="nav-link" href="../pages/samples/login.html">Login</a></li> <li class="nav-item"><a class="nav-link" href="../pages/samples/login-2.html">Login 2</a></li> <li class="nav-item"><a class="nav-link" href="../pages/samples/register.html">Register</a></li> <li class="nav-item"><a class="nav-link" href="../pages/samples/register-2.html">Register 2</a></li> <li class="nav-item"><a class="nav-link" href="../pages/samples/lock-screen.html">Lockscreen</a></li> </ul> </div> <div class="col-group col-md-3"> <p class="category-heading">Error Pages</p> <ul class="submenu-item"> <li class="nav-item"><a class="nav-link" href="../pages/samples/error-400.html">400</a></li> <li class="nav-item"><a class="nav-link" href="../pages/samples/error-404.html">404</a></li> <li class="nav-item"><a class="nav-link" href="../pages/samples/error-500.html">500</a></li> <li class="nav-item"><a class="nav-link" href="../pages/samples/error-505.html">505</a></li> </ul> </div> <div class="col-group col-md-3"> <p class="category-heading">E-commerce</p> <ul class="submenu-item"> <li class="nav-item"><a class="nav-link" href="../pages/samples/invoice.html">Invoice</a></li> <li class="nav-item"><a class="nav-link" href="../pages/samples/pricing-table.html">Pricing Table</a></li> <li class="nav-item"><a class="nav-link" href="../pages/samples/orders.html">Orders</a></li> </ul> </div> <div class="col-group col-md-3"> <div class="row"> <div class="col-12"> <p class="category-heading">Layout</p> <ul class="submenu-item"> <li class="nav-item"><a class="nav-link" href="../pages/layouts/rtl.html">RTL Layout</a></li> </ul> </div> <div class="col-12 mt-3"> <p class="category-heading">Documentation</p> <ul class="submenu-item"> <li class="nav-item"><a class="nav-link" href="../pages/documentation.html">Documentation</a></li> </ul> </div> </div> </div> </div> </div> </li> <li class="nav-item mega-menu"> <a href="#" class="nav-link"><i class="link-icon mdi mdi-android-studio"></i><span class="menu-title">FORMS</span><i class="menu-arrow"></i></a> <div class="submenu"> <div class="col-group-wrapper row"> <div class="col-group col-md-3"> <p class="category-heading">Basic Elements</p> <ul class="submenu-item"> <li class="nav-item"><a class="nav-link" href="../pages/forms/basic_elements.html">Basic Elements</a></li> <li class="nav-item"><a class="nav-link" href="../pages/forms/advanced_elements.html">Advanced Elements</a></li> <li class="nav-item"><a class="nav-link" href="../pages/forms/validation.html">Validation</a></li> <li class="nav-item"><a class="nav-link" href="../pages/forms/wizard.html">Wizard</a></li> <li class="nav-item"><a class="nav-link" href="../pages/forms/text_editor.html">Text Editor</a></li> <li class="nav-item"><a class="nav-link" href="../pages/forms/code_editor.html">Code Editor</a></li> </ul> </div> <div class="col-group col-md-3"> <p class="category-heading">Charts</p> <ul class="submenu-item"> <li class="nav-item"><a class="nav-link" href="../pages/charts/chartjs.html">Chart Js</a></li> <li class="nav-item"><a class="nav-link" href="../pages/charts/morris.html">Morris</a></li> <li class="nav-item"><a class="nav-link" href="../pages/charts/flot-chart.html">Flaot</a></li> <li class="nav-item"><a class="nav-link" href="../pages/charts/google-charts.html">Google Chart</a></li> <li class="nav-item"><a class="nav-link" href="../pages/charts/sparkline.html">Sparkline</a></li> <li class="nav-item"><a class="nav-link" href="../pages/charts/c3.html">C3 Chart</a></li> <li class="nav-item"><a class="nav-link" href="../pages/charts/chartist.html">Chartist</a></li> <li class="nav-item"><a class="nav-link" href="../pages/charts/justGage.html">JustGage</a></li> </ul> </div> <div class="col-group col-md-3"> <p class="category-heading">Maps</p> <ul class="submenu-item"> <li class="nav-item"><a class="nav-link" href="../pages/maps/mapeal.html">Mapeal</a></li> <li class="nav-item"><a class="nav-link" href="../pages/maps/vector-map.html">Vector Map</a></li> <li class="nav-item"><a class="nav-link" href="../pages/maps/google-maps.html">Google Map</a></li> </ul> </div> </div> </div> </li> <li class="nav-item"> <a href="#" class="nav-link"><i class="link-icon mdi mdi-asterisk"></i><span class="menu-title">APPS</span><i class="menu-arrow"></i></a> <div class="submenu"> <ul class="submenu-item"> <li class="nav-item"><a class="nav-link" href="../pages/apps/email.html">Email</a></li> <li class="nav-item"><a class="nav-link" href="../pages/apps/calendar.html">Calendar</a></li> <li class="nav-item"><a class="nav-link" href="../pages/apps/todo.html">Todo List</a></li> <li class="nav-item"><a class="nav-link" href="../pages/apps/gallery.html">Gallery</a></li> </ul> </div> </li> </ul> </div> </div> </nav> <!-- partial --> <div class="container-fluid page-body-wrapper"> <div class="main-panel"> <div class="content-wrapper"> /* Page Content Goes Here... */ </div> <!-- content-wrapper ends --> <!-- partial:../partials/_footer.html --> <footer class="footer"> <div class="container-fluid clearfix"> <span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © 2018 <a href="http://www.urbanui.com/" target="_blank">Urbanui</a>. All rights reserved.</span> <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Hand-crafted & made with <i class="mdi mdi-heart text-danger"></i></span> </div> </footer> <!-- partial --> </div> <!-- main-panel ends --> </div> <!-- page-body-wrapper ends --> </div> <!-- container-scroller --> <!-- plugins:js --> <script src="../vendors/js/vendor.bundle.base.js"></script> <script src="../vendors/js/vendor.bundle.addons.js"></script> <!-- endinject --> <!-- Plugin js for this page--> <!-- End plugin js for this page--> <!-- inject:js --> <script src="../js/template.js"></script> <!-- endinject --> <!-- Custom js for this page--> <!-- End custom js for this page--> </body> </html>

### Basic UI Elements

##### Button with default color

<div class="row"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> </div>

##### Outlined

<div class="row"> <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Danger</button> </div>

##### Sizes

<div class="row"> <button type="button" class="btn btn-primary btn-lg">Small</button> <button type="button" class="btn btn-secondary">Medium</button> <button type="button" class="btn btn-success btn-sm">Large</button> </div>

##### Bootstrap Accordion

##### Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

##### Collapsible Group Item #2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

##### Collapsible Group Item #3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div id="accordion" role="tablist" aria-multiselectable="true"> <div class="card"> <div class="card-header" role="tab" id="headingOne"> <h5 class="mb-0"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h5> </div> <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne"> <div class="card-body"> .... </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="headingTwo"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h5> </div> <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="card-body"> .... </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h5> </div> <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="card-body"> .... </div> </div> </div> </div>

##### Bootstrap Dropdown

<div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div>

##### Dropdown Outlined

<div class="btn-group"> <button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div>

##### Bootstrap Tabs

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

##### Bootstrap Modal

##### Modal title

This is a modal with default size

<div class="modal fade" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>This is a modal with default size</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

##### Bootstrap Pagination

<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav>

##### Bootstrap Badges

Default
Pill
Outlined
<div class="badge badge-primary">Default</div> <div class="badge badge-primary badge-pill">Pill</div> <div class="badge badge-outline-primary badge-pill">Outlined</div>

### Basic UI Elements - 2

##### Bootstrap Breadcrumb

<nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Library</li> </ol> </nav>

##### Bootstrap Progressbar

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

##### Bootstrap Tooltip

Add the following script files in <body>.

<script src="path-to/js/tooltips.js"></script>

To create a clipboard, add the following code:

<button class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Basic tooltip">Hover me</button> <script> $('[data-toggle="tooltip"]').tooltip(); </script>

### Advanced UI Elements

Clipboard, a modern approach to copy text to clipboard.

#### Usage

Add the following script files in <body>.

<script src="path-to/node_modules/clipboard/dist/clipboard.min.js"></script>

To create a clipboard, add the following code:

<textarea id="clipboardExample2" class="form-control">Hello</textarea> <button type="button" class="btn btn-primary btn-clipboard" data-clipboard-action="copy" data-clipboard-target="#clipboardExample2">Copy</button> <button type="button" class="btn btn-danger btn-clipboard" data-clipboard-action="cut" data-clipboard-target="#clipboardExample2">Cut</button> <script> var clipboard = new Clipboard('.btn-clipboard'); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error', function(e) { console.log(e); }); </script>

Todolist is a minimal jQuery plugin to create checklist.

#### Usage

Add the following script files in <body>.

<script src="path-to/js/todolist.js"></script>

To create a filterable list, add the following code:

<div class="add-items d-flex"> <input type="text" class="form-control todo-list-input" placeholder="What do you need to do today?"> <button class="add btn btn-primary font-weight-bold todo-list-add-btn" id="add-task">Add</button> </div> <div class="list-wrapper"> <ul class="d-flex flex-column-reverse todo-list"> <li> <div class="form-check"> <label class="form-check-label"> <input class="checkbox" type="checkbox"> Meeting with Alisa </label> </div> <i class="remove mdi mdi-close-circle-outline"></i> </li> <li> ... </li> <li> ... </li> <li> ... </li> </ul> </div>

Bootstrap Tour is the easiest way to show people how to use your website.

#### Usage

To use bootstrap tour in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/bootstrap-tour/build/css/bootstrap-tour-standalone.min.css">

Add the following script files in <body>.

<script src="path-to/node_modules/bootstrap-tour/build/js/bootstrap-tour-standalone.min.js"></script>

To create a filterable list, add the following code:

<button class="btn btn-primary" id="tourElement1">What is this?</button> <div class="row mt-3"> <div class="col-12 col-md-3"> <input type="text" class="form-control" id="tourElement2" placeholder="Ask a question" /> </div> <div class="col-12 col-md-9"> <button class="btn btn-primary" id="tourElement3">Ask</button> </div> </div> <button class="btn btn-primary mt-3" id="tourElement4">Answer</button> <script> (function($) { var tour = new Tour({ steps: [ { element: "#tourElement1", title: "Welcome", content: "This is an example of bootstrap tour" }, { element: "#tourElement2", title: "Question", content: "Type your question here" }, { element: "#tourElement3", title: "Ask", content: "Click this button to post the question" }, { element: "#tourElement4", title: "Answer", content: "Click here to answer questions." } ] }); if (tour.ended()) { tour.restart(); } else { tour.init(); tour.start(); } })(jQuery); </script>

Dragula ,Drag and drop so simple it hurts.

#### Usage

To use Dragula in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/dragula/dist/dragula.min.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/dragula/dist/dragula.min.js"></script>

To create a drag n drop list, add the following code:

<div id="dragula-event-left" class="h-100"> <div> Drag me! </div> </div> <div id="dragula-event-right" class="h-100"> <div> Drag me! </div> </div> <script> (function($) { dragula([document.getElementById("dragula-left"), document.getElementById("dragula-right")]); dragula([document.getElementById("dragula-event-left"), document.getElementById("dragula-event-right")]) .on('drop', function(el) { el.className += ' bg-danger'; }) })(jQuery); </script>

The contextMenu Plugin was designed for web applications in need of menus on a possibly large amount of objects. Click Here to see the official documentation.

noUiSlider is a range slider without bloat.

#### Usage

To use NoUISlider in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/nouislider/distribute/nouislider.min.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/nouislider/distribute/nouislider.min.js"></script>

To create a slider, add the following code:

<div id="ui-slider" class="slider"></div> <script> var startSlider = document.getElementById('ui-slider'); noUiSlider.create(startSlider, { start: [20, 80], range: { 'min': [0], 'max': [100] } }); </script>

Easy, flexible and responsive range slider with skin support. Click Here to see the official documentation.

Colcade is a simple lightweight masonry layout.

#### Usage

Add the following script files in <body>.

<script src="path-to/node_modules/colcade/colcade.js"></script>

To create a responsive, add the following code:

<div class="grid"> <div class="grid-col grid-col--1"></div> <div class="grid-col grid-col--2"></div> <div class="grid-col grid-col--3"></div> <div class="grid-col grid-col--4"></div> <div class="grid-item grid-item--b"></div> <div class="grid-item grid-item--a"></div> <div class="grid-item grid-item--c"></div> <div class="grid-item grid-item--a"></div> <div class="grid-item grid-item--a"></div> <div class="grid-item grid-item--b"></div> <div class="grid-item grid-item--c"></div> <div class="grid-item grid-item--c"></div> </div> <script> var colcade = new Colcade('.grid', { columns: '.grid-col', items: '.grid-item' }); </script>

### Media

Light Galary is a customizable, modular, responsive, Lightbox gallery plugin for jQuery.

#### Usage

To use LightGallery in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/lightgallery/dist/css/lightgallery.min.css">

Add the following script files in <body>.

<script src="path-to/node_modules/lightgallery/dist/js/lightgallery-all.min.js"></script>

To create Lightbox Gallery, add the following code:

<div id="gallery" class="row lightGallery"> <a class="image-tile col-xl-3 col-lg-3 col-md-3 col-md-4 col-6" href="http://via.placeholder.com/690x580"> <img src="http://via.placeholder.com/280x280" /> </a> <a class="image-tile col-xl-3 col-lg-3 col-md-3 col-md-4 col-6" href="http://via.placeholder.com/690x580"> <img src="http://via.placeholder.com/280x280" /> </a> <a class="image-tile col-xl-3 col-lg-3 col-md-3 col-md-4 col-6" href="http://via.placeholder.com/690x580"> <img src="http://via.placeholder.com/280x280" /> </a> <a class="image-tile col-xl-3 col-lg-3 col-md-3 col-md-4 col-6" href="http://via.placeholder.com/690x580"> <img src="http://via.placeholder.com/280x280" /> </a> <a class="image-tile col-xl-3 col-lg-3 col-md-3 col-md-4 col-6" href="http://via.placeholder.com/690x580"> <img src="http://via.placeholder.com/280x280" /> </a> </div> <script> $("#lightgallery").lightGallery(); </script>

Owl Carousel is a touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

#### Usage

To use Owl Carousel in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/owl-carousel-2/assets/owl.carousel.min.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/owl-carousel-2/owl.carousel.min.js"></script>

To create a carousel, add the following code:

<div class="owl-carousel owl-theme nonloop"> <div class="item"><h4>1</h4></div> <div class="item"><h4>2</h4></div> <div class="item"><h4>3</h4></div> <div class="item"><h4>4</h4></div> <div class="item"><h4>5</h4></div> <div class="item"><h4>6</h4></div> <div class="item"><h4>7</h4></div> <div class="item"><h4>8</h4></div> <div class="item"><h4>9</h4></div> <div class="item"><h4>10</h4></div> <div class="item"><h4>11</h4></div> <div class="item"><h4>12</h4></div> </div> <script> $('.owl-carousel').owlCarousel(); </script>

### Tables

To create a basic Twitter Bootstrap table, add the following code.

<table class="table"> <thead> <tr class=""> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td scope="row">1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td scope="row">2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td scope="row">3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>

Bootstrap-table is an extended Bootstrap table with radio, checkbox, sort, pagination, and other added features.

#### Usage

To use Bootstrap-table in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/bootstrap-table/dist/bootstrap-table.min.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/bootstrap-table/dist/bootstrap-table.min.js"></script>

Activate Bootstrap table without writing JavaScript, set data-toggle="table" on a normal table.

<table data-toggle="table"> <thead> <tr> <th>Item ID</th> <th>Item Name</th> <th>Item Price</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Item 1</td> <td>$1</td> </tr> <tr> <td>2</td> <td>Item 2</td> <td>$2</td> </tr> </tbody> </table>

Js-grid creates simple responsive chartsis a lightweight client-side data grid control based on jQuery.

#### Usage

To use Js-grid in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/jsgrid/dist/jsgrid.min.css" /> <link rel="stylesheet" href="path-to/node_modules/jsgrid/dist/jsgrid-theme.min.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/jsgrid/dist/jsgrid.min.js"></script>

To create a basic table using Js-grid, add the following code:

<div id="js-grid"></div> <script> $("#js-grid").jsGrid({ height: "500px", width: "100%", filtering: true, editing: true, inserting: true, sorting: true, paging: true, autoload: true, pageSize: 15, pageButtonCount: 5, deleteConfirm: "Do you really want to delete the client?", controller: db, fields: [{ name: "Name", type: "text", width: 150 }, { name: "Age", type: "number", width: 50 }, { name: "Address", type: "text", width: 200 }, { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" }, { name: "Married", type: "checkbox", title: "Is Married", sorting: false }, { type: "control" }] }); </script>

Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.

#### Usage

To use Table in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/bootstrap-table/dist/bootstrap-table.min.css">

Add the following script files in <body>.

<script src="path-to/js/jq.tablesort.js"></script>

To create a Table, add the following code:

<div class="table-sorter-wrapper"> <table id="myTable" class="table table-striped table-hover"> <thead> <tr> <th class="sortStyle">Last Name</th> <th class="sortStyle">First Name</th> <th class="sortStyle">Due</th> <th class="sortStyle">Web Site</th> </tr> </thead> <tbody> <tr> <td>Smith</td> <td>John</td> <td>$50.00</td> <td>http://www.jsmith.com</td> </tr> <tr> <td>Bach</td> <td>Frank</td> <td>$50.00</td> <td>http://www.frank.com</td> </tr> <tr> <td>Doe</td> <td>Jason</td> <td>$100.00</td> <td>http://www.jdoe.com</td> </tr> <tr> <td>Conway</td> <td>Tim</td> <td>$50.00</td> <td>http://www.timconway.com</td> </tr> </tbody> </table> </div> <script> $('#myTable').tablesort(); </script>

### Charts

Chart.js is a simple yet flexible JavaScript charting for designers & developers.

#### Usage

To use Chart.js in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css" />

and the following script files in <body>.

<script src="path-to/node_modules/chart.js/dist/Chart.min.js"></script>

To create a simple chart, add the following code:

<canvas id="lineChart" style="height:250px"></canvas> <script> var data = { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }; var options = { scales: { yAxes: [{ ticks: { beginAtZero:true } }] }, legend: { display: false }, elements: { point: { radius: 0 } } }; if($("#lineChart").length) { var lineChartCanvas = $("#lineChart").get(0).getContext("2d"); var lineChart = new Chart(lineChartCanvas, { type: 'line', data: data, options: options }); } </script>

Float.js is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

#### Usage

Add following script files in <body>.

<script src="path-to/node_modules/flot/jquery.flot.js"></script> <script src="path-to/node_modules/flot/jquery.flot.resize.js"></script>

To create a simple chart, add the following code:

<div class="float-chart-container"> <div id="placeholder-basic" class="float-chart"></div> </div> <script> $(function() { var d1 = []; for (var i = 0; i < Math.PI * 2; i += 0.25) { d1.push([i, Math.sin(i)]); } var d2 = []; for (var i = 0; i < Math.PI * 2; i += 0.25) { d2.push([i, Math.cos(i)]); } var d3 = []; for (var i = 0; i < Math.PI * 2; i += 0.1) { d3.push([i, Math.tan(i)]); } $.plot("#placeholder-basic-option", [{ label: "sin(x)", data: d1 }, { label: "cos(x)", data: d2 }, { label: "tan(x)", data: d3 } ], { series: { lines: { show: true }, points: { show: true } }, xaxis: { ticks: [ 0, [Math.PI / 2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3 / 2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"] ] }, yaxis: { ticks: 10, min: -2, max: 2, tickDecimals: 3 }, grid: { backgroundColor: { colors: ["#fff", "#eee"] }, borderWidth: { top: 1, right: 1, bottom: 2, left: 2 } } }); }); </script>

Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.

#### Usage

Add the following script files in <body>.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Basic chart structure:

<div class="google-chart-container"> <div id="Bar-chart" class="google-charts"></div> </div> <script> if($("#barChart").length) { var barChartCanvas = $("#barChart").get(0).getContext("2d"); // This will get the first returned node in the jQuery collection. var barChart = new Chart(barChartCanvas, { type: 'bar', data: data, options: options }); } </script>

C3.js is a D3-based reusable chart library.

###### Usage

To use C3 charts in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/c3/c3.min.css" />

and the following script files in <body>.

<script src="path-to/node_modules/d3/d3.min.js"></script> <script src="path-to/node_modules/c3/c3.min.js"></script>

To create a simple chart, add the following code:

<div id="c3-line-chart"></div> <script> var c3LineChart = c3.generate({ bindto: '#c3-line-chart', data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ] } }); </script>

Chartist creates simple responsive charts.

#### Usage

To use Chartist in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/chartist/dist/chartist.min.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/chartist/dist/chartist.min.js"></script>

To create a simple line chart using Chartist, add the following code:

<div class="ct-chart ct-perfect-fourth" id="ct-chart-line"></div> <script> new Chartist.Line('#ct-chart-line', { labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], series: [ [12, 9, 7, 8, 5], [2, 1, 3.5, 7, 3], [1, 3, 4, 5, 6] ] }, { fullWidth: true, chartPadding: { right: 40 } }); </script>

Morris creates pretty time-series line graphs.

#### Usage

To use Morris in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/morris.js/morris.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/raphael/raphael.min.js"></script> <script src="path-to/node_modules/morris.js/morris.min.js"></script>

To create a simple line chart using Morris, add the following code:

<div id="morris-line-example"></div> <script> Morris.Line({ element: 'morris-line-example', data: [{ y: '2006', a: 100, b: 90 }, { y: '2007', a: 75, b: 65 }, { y: '2008', a: 50, b: 40 }, { y: '2009', a: 75, b: 65 }, { y: '2010', a: 50, b: 40 }, { y: '2011', a: 75, b: 65 }, { y: '2012', a: 100, b: 90 } ], xkey: 'y', ykeys: ['a', 'b'], labels: ['Series A', 'Series B'] }); </script>

Rickshaw is a JavaScript toolkit for creating interactive time series graphs.

#### Usage

To use Rickshaw in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/rickshaw/rickshaw.min.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/rickshaw/rickshaw.min.js"></script>

To create a simple chart using rickshaw, add the following code:

<div id="rickshaw-simple"></div> <script> var rickshawSimple = new Rickshaw.Graph({ element: document.getElementById("rickshaw-simple"), renderer: 'line', series: [{ data: [{ x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 }], color: 'steelblue' }, { data: [{ x: 0, y: 19 }, { x: 1, y: 22 }, { x: 2, y: 32 }, { x: 3, y: 20 }, { x: 4, y: 21 }], color: 'lightblue' }, { data: [{ x: 0, y: 39 }, { x: 1, y: 32 }, { x: 2, y: 12 }, { x: 3, y: 5 }, { x: 4, y: 12 }], color: 'steelblue', strokeWidth: 10, opacity: 0.5 }] }); rickshawSimple.render(); </script>

Jquery Sparkline generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via Javascript.

#### Usage

To use Sparkline in your application, add the following script files in <body>.

<script src="path-to/node_modules/jquery-sparkline/jquery.sparkline.min.js"></script>

To create a line chart using Sparkline, add the following code:

<div id="sparkline-line-chart"></div> <script> $("#sparkline-line-chart").sparkline([5,6,7,9,9,5,3,2,2,4,6,7], { type: 'line', width: '100%', height: '100%' }); </script>

Just Gage is a handy JavaScript plugin for generating and animating nice & clean gauges.

#### Usage

Add the following script files in <body>.

<script src="path-to/node_modules/justgage/justgage.js"></script>

To create a gage, add the following code:

<div id="justgage" class="gauge"></div> <script> window.onload = function() { var g1 = new JustGage({ id: "g1", value: getRandomInt(0, 100), min: 0, max: 100, title: "Big Fella", label: "pounds" }); }; </script>

### Maps

JvectorMap uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML.

#### Usage

To use Vector map in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/jqvmap/dist/jqvmap.min.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/jqvmap/dist/jquery.vmap.min.js"></script>

To create a simple map, add the following code:

<div id="vmap" class="vector-map" style="width: 100%; height:500px"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } $(function() { jQuery('#vmap').vectorMap({ map: 'world_en' }); }); </script>

Mapeal Map Ease the build of pretty data visualizations on dynamic vector maps.

Add the following script files in <body>.

<script src="path-to/node_modules/raphael/raphael.min.js"></script> <script src="path-to/node_modules/jquery-mapael/js/jquery.mapael.min.js"></script>

To create a simple map, add the following code:

<div class="container"> <div class="map">Alternative content</div> </div> <script> $(".container").mapael({ map: { name: "world_countries" } }); </script>

### Forms

The basic form elements can be added to your application as below:

<form class="forms-sample"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control p-input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted text-success"><span class="fa fa-info mt-1"></span> We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control p-input" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleTextarea">Example textarea</label> <textarea class="form-control p-input" id="exampleTextarea" rows="3"></textarea> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp"> <small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small> </div> <fieldset class="form-group"> <legend class="mb-4 mt-5">Radio buttons</legend> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div> <div class="form-check disabled"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled </label> </div> </fieldset> <div class="form-check col-12"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> Check me out </label> </div> <div class="col-12"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form>

We are using Jquery validation for simple clientside form validation.

#### Usage

To use jquery validation in your application, include the following script files in <body>.

<script src="path-to/node_modules/jquery-validation/dist/jquery.validate.min.js"></script>

The following code shows validation of a simple form:

<form class="cmxform" id="commentForm" method="get" action=""> <fieldset> <div class="form-group"> <label for="cname">Name (required, at least 2 characters)</label> <input id="cname" class="form-control" name="name" minlength="2" type="text" required> </div> <div class="form-group"> <label for="cemail">E-Mail (required)</label> <input id="cemail" class="form-control" type="email" name="email" required> </div> <div class="form-group"> <label for="curl">URL (optional)</label> <input id="curl" class="form-control" type="url" name="url"> </div> <div class="form-group"> <label for="ccomment">Your comment (required)</label> <textarea id="ccomment" class="form-control" name="comment" required></textarea> </div> <input class="btn btn-primary" type="submit" value="Submit"> </fieldset> </form> <script> $.validator.setDefaults({ submitHandler: function() { alert("submitted!"); } }); $(function() { // validate the comment form when it is submitted $("#commentForm").validate({ errorPlacement: function(label, element) { label.addClass('text-danger'); label.insertAfter(element); }, highlight: function(element, errorClass) { $(element).parent().addClass('has-danger') $(element).addClass('form-control-danger') } }); }); </script>

We are using Jquery steps in our template to create form addons. It is an all-in-one wizard plugin that is extremely flexible, compact and feature-rich.

#### Usage

To use jquery.steps in your application, include the following files <body>.

<script src="path-to/node_modules/jquery-steps/build/jquery.steps.min.js"></script>

The following code generates a simple form wizard.

<form id="example-form" action="#"> <div> <h3>Account</h3> <section> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputPassword1">Confirm Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm password"> </div> </section> <h3>Profile</h3> <section> <div class="form-group"> <label for="exampleInputEmail1">First name</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter first name"> </div> <div class="form-group"> <label>Last name</label> <input type="password" class="form-control" placeholder="Last name"> </div> <div class="form-group"> <label>Profession</label> <input type="password" class="form-control" placeholder="Profession"> </div> </section> <h3>Comments</h3> <section> <div class="form-group"> <label>Comments</label> <textarea class="form-control" rows="3"></textarea> </div> </section> <h3>Finish</h3> <section> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> I agree terms and conditions </label> </div> </section> </div> </form> <script> var form = $("#example-form"); form.children("div").steps({ headerTag: "h3", bodyTag: "section", transitionEffect: "slideLeft", onFinished: function (event, currentIndex) { alert("Submitted!"); } }); </script>

Jquery Repeater is an interface to add and remove a repeatable group of input elements.

#### Usage

Add the following script files in <body>.

<script src="path-to/node_modules/jquery.repeater/jquery.repeater.min.js"></script>

To create a Repeater, add the following code:

<form class="form-inline repeater"> <div data-repeater-list="group-a"> <div data-repeater-item class="d-flex mb-2"> <label class="sr-only" for="inlineFormInput">Name</label> <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe"> <label class="sr-only" for="inlineFormInputGroup">Username</label> <div class="input-group mb-2 mr-sm-2 mb-sm-0"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username"> </div> <button type="submit" class="btn btn-primary">Submit</button> <input data-repeater-delete type="button" class="btn btn-danger ml-2" value="Delete" /> </div> </div> <input data-repeater-create type="button" class="btn btn-success ml-2 mb-2" value="+" /> </form> <script> $(document).ready(function() { $('.repeater').repeater() }); </script>

### Additional form elements

jQuery-Tags-Input magically convert a simple text input into a cool tag list with this jQuery plugin.

#### Usage

To use jQuery-Tags-Input in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/jquery-tags-input/dist/jquery.tagsinput.min.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/jquery-tags-input/dist/jquery.tagsinput.min.js"></script>

To convert an input to tag using jQuery-Tags-Input, add the following code:

<input name="tags" id="tags" value="London,Canada,Australia,Mexico" /> <script> $('#tags').tagsInput({ 'width': '100%', 'height': '75%', 'interactive': true, 'defaultText': 'Add More', 'removeWithBackspace': true, 'minChars': 0, 'maxChars': 20, // if not provided there is no limit 'placeholderColor': '#666666' }); </script>

jQuery Bar Rating Plugin works by transforming a standard select field into a rating widget.

#### Usage

To use Bar rating in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/font-awesome/css/font-awesome.min.css" /> <link rel="stylesheet" href="path-to/node_modules/jquery-bar-rating/dist/themes/fontawesome-stars.css">

Add the following script files in <body>.

<script src="path-to/node_modules/jquery-bar-rating/dist/jquery.barrating.min.js"></script>

To create a simple rating, add the following code:

<select id="example-fontawesome" name="rating" autocomplete="off"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <script> $('#example-fontawesome').barrating({ theme: 'fontawesome-stars', showSelectedRating: false }); </script>

Bootstrap MaxLength uses a Twitter Bootstrap label to show a visual feedback to the user about the maximum length of the field where the user is inserting text. Uses the HTML5 attribute "maxlength" to work.

#### Usage

Add the following script files in <body>.

<script src="path-to/node_modules/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>

To create a Maxlength input, add the following code:

<input class="form-control" maxlength="25" name="defaultconfig" id="defaultconfig" type="text"> <script> $('#defaultconfig').maxlength(); </script>

Input-mask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers etc.

#### Usage

To use Inputmask in your application, include the following files in <body>.

<script src="path-to/node_modules/inputmask/dist/jquery.inputmask.bundle.js"></script> <script src="path-to/node_modules/inputmask/dist/inputmask/phone-codes/phone.js"></script> <script src="path-to/node_modules/inputmask/dist/inputmask/phone-codes/phone-be.js"></script> <script src="path-to/node_modules/inputmask/dist/inputmask/phone-codes/phone-ru.js"></script> <script src="path-to/node_modules/inputmask/dist/inputmask/bindings/inputmask.binding.js"></script>

The below code shows an example of input mask for date.

<input class="form-control" data-inputmask="'alias': 'date'" />

Icheck is a set of highly customizable checkboxes and radio buttons.

#### Usage

To use Icheck in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/icheck/skins/all.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/icheck/icheck.min.js"></script>

The following code gives a minimal skin checkbox and radio using Icheck.

<div class="icheck"> <input tabindex="5" type="checkbox" id="minimal-checkbox-1"> <label for="minimal-checkbox-1">Checkbox 1</label> </div> <div class="icheck"> <input tabindex="7" type="radio" id="minimal-radio-1" name="minimal-radio"> <label for="minimal-radio-1">Radio button 1</label> </div> <script> $('.icheck input').iCheck({ checkboxClass: 'icheckbox_minimal-blue', //You can change the skin color as needed radioClass: 'iradio_minimal', increaseArea: '20%' }); </script>

Typeahead.js is a flexible JavaScript library that provides a strong foundation for building robust typeaheads.

#### Usage

To use Typeahead.js in your application, include the following files in <body>.

<script src="path-to/node_modules/typeahead.js/dist/typeahead.bundle.min.js"></script>

A sample typeahead can be generated as below:

<div id="typeahead sample"> <input class="typeahead" type="text" placeholder="States of USA"> </div> <script> //Define substring matcher function var substringMatcher = function (strs) { return function findMatches(q, cb) { var matches, substringRegex; // an array that will be populated with substring matches matches = []; // regex used to determine if a string contains the substring `q` substrRegex = new RegExp(q, 'i'); // iterate through the pool of strings and for any string that // contains the substring `q`, add it to the `matches` array $.each(strs, function (i, str) { if (substrRegex.test(str)) { matches.push(str); } }); cb(matches); }; }; //dataset var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' ]; //Initialisation $('#typeahead-sample .typeahead').typeahead({ hint: true, highlight: true, minLength: 1 }, { name: 'states', source: substringMatcher(states) }); </script>

Cropper is a simple jQuery image cropping plugin.

#### Usage

To use cropper in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/cropper/dist/cropper.min.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/cropper/dist/cropper.min.js"></script>

To crop an image using cropper, add the following code:

<div class="cropper-wrapper"> <img id="cropperExample" src="http://via.placeholder.com/280x280"> </div> <script> $('#cropperExample').cropper({ aspectRatio: 16 / 9 }); </script>

### Icons

Material Design Icons growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project.

#### Usage

To use Material Design Icons in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/mdi/css/materialdesignicons.min.css"/>

To generate an icon, add the following code:

<i class="mdi mdi-bell"></i>

Font Awesome gives you scalable vector icons that can instantly be customized.

#### Usage

To use Font Awesome in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/font-awesome/css/font-awesome.min.css" />

To create an address-book icon, add the following code:

<i class="fa fa-address-book">

Themify Icons Themify Icons is a complete set of icons for use in web design and apps.

#### Usage

To use themify icons in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/ti-icons/css/themify-icons.css" />

To generate an icon, add the following code:

<i class="ti-arrow-up"></i>

Simple Line Icons is a set of simple and minimal line icons.

#### Usage

To use Simple Line Icons in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/simple-line-icons/css/simple-line-icons.css" />

To generate an icon, add the following code:

<i class="icon-user"></i>

Flag Icons is a collection of all country flags in SVG — plus the CSS for easier integration.

#### Usage

To use Simple Line Icons in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/flag-icon-css/css/flag-icon.min.css"/>

To generate an icon, add the following code:

<i class="flag-icon flag-icon-ad" title="ad" id="ad"></i>

### File Upload

Dropify is a simple drag n drop file upload.

#### Usage

To use Dropify in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/dropify/dist/css/dropify.min.css">

Add the following script files in <body>.

<script src="path-to/node_modules/dropify/dist/js/dropify.min.js"></script>

To create a Dropify file upload, add the following code:

<input type="file" class="dropify"/> <script> $('.dropify').dropify(); </script>

Dropzone is an open source library that provides drag’n’drop file uploads with image previews.

#### Usage

Add the following script files in <body>.

<script src="path-to/node_modules/dropzone/dist/dropzone.js"></script>

To create a Dropzone file upload,add the following code:

<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form> <script> $("#my-awesome-dropzone").dropzone({ url: "/file/post" }); </script>

jQuery File UPload plugin provides multiple file uploads with progress bar. jQuery File Upload Plugin depends on Ajax Form Plugin, So Github contains source code with and without form plugin.

#### Usage

To use file upload in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/jquery-file-upload/css/uploadfile.css">

Add the following script files in <body>.

<script src="path-to/node_modules/jquery-file-upload/js/jquery.uploadfile.min.js"></script>

To create a Jquery file upload,add the following code:

<div class="file-upload-wrapper"> <div id="fileuploader">Upload</div> </div> <script> $("#fileuploader").uploadFile({ url: "YOUR_FILE_UPLOAD_URL", fileName: "myfile" }); </script>

### Form Picker

We are using Tempus Dominus plugin in our template to create beautiful time picker.

#### Usage

To use clock picker in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.js"></script>

To create a clock picker, add the following code:

<div class="input-group date" id="timepicker-example" data-target-input="nearest"> <div class="input-group" data-target="#timepicker-example" data-toggle="datetimepicker"> <input type="text" class="form-control datetimepicker-input" data-target="#timepicker-example"/> <div class="input-group-addon input-group-append"><i class="mdi mdi-clock input-group-text"></i></div> </div> </div> <script> $('#timepicker-example').datetimepicker({ format: 'LT' }); </script>

Bootstrap Date Picker provides a flexible datepicker widget in the Bootstrap style.

#### Usage

To use bootstrap date picker in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>

To create a datepicker, add the following code:

<div id="datepicker-popup" class="input-group date datepicker"> <input type="text" class="form-control"> <span class="input-group-addon input-group-append border-left"> <span class="mdi mdi-calendar input-group-text"></span> </span> </div> <script> $('#datepicker-popup').datepicker(); </script>

AsColor Picker is a jQuery plugin that convent input into color picker.

#### Usage

To use color picker in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/jquery-asColorPicker/dist/css/asColorPicker.min.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/jquery-asColor/dist/jquery-asColor.min.js"></script> <script src="path-to/node_modules/jquery-asColorPicker/dist/jquery-asColorPicker.min.js"></script> <script src="path-to/node_modules/jquery-asGradient/dist/jquery-asGradient.min.js"></script> //optional

To create a color picker, add the following code:

<input type='text' class="color-picker" value="#ffe74c" /> <script> $('.color-picker').asColorPicker() </script>

### Editors

Tinymce is a full-featured web editing tool.

#### Usage

To use Tinymce in your application, include the following files in <body>.

<script src="path-to/node_modules/tinymce/tinymce.min.js"></script>

To create an editor using tinymce, add the following code:

<textarea id='tinyMceExample'></textarea> <script> tinymce.init({ selector: '#tinyMceExample', height: 500, theme: 'modern', plugins: [ 'advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media nonbreaking save table contextmenu directionality', 'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help' ], toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help', image_advtab: true, templates: [{ title: 'Test template 1', content: 'Test 1' }, { title: 'Test template 2', content: 'Test 2' } ], content_css: [ '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i', '//www.tinymce.com/css/codepen.min.css' ] }); </script>

X-editable allows you to create editable elements on your page. It can be used with any engine (Bootstrap, jQuery-UI, jQuery only) and includes both popup and inline modes.

#### Usage

To use x-editable in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>

To create a simple editable text field, add the following code:

<a href="#" id="username" data-type="text" data-pk="1">awesome</a> <script> $.fn.editable.defaults.mode = 'inline'; $.fn.editableform.buttons = '<button type="submit" class="btn btn-primary btn-sm editable-submit">' + '<i class="fa fa-fw fa-check"></i>' + '</button>' + '<button type="button" class="btn btn-default btn-sm editable-cancel">' + '<i class="fa fa-fw fa-times"></i>' + '</button>'; $('#username').editable({ type: 'text', pk: 1, name: 'username', title: 'Enter username' }); </script>

Summernote is a super simple WYSIWYG Editor.

#### Usage

To use summernote in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/summernote-bootstrap4/dist/summernote.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/summernote-bootstrap4/dist/summernote.min.js"></script>

To create a summernote editor, add the following code:

<div id="summernoteExample"></div> <script> $('#summernoteExample').summernote({ height: 300, tabsize: 2 }); </script>

SimpleMDE is a simple, beautiful, and embeddable JavaScript Markdown editor.

#### Usage

To use simpleMDE in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/simplemde/dist/simplemde.min.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/simplemde/dist/simplemde.min.js"></script>

To create an editor using simpleMDE, add the following code:

<textarea id="simpleMde">Start editing here</textarea> <script> if($("#simpleMde").length) { var simplemde = new SimpleMDE({ element: $("#simpleMde")[0] }); } </script>

Quill is a free, open source WYSIWYG editor built for the modern web.

#### Usage

To use Quill in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/quill/dist/quill.snow.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/quill/dist/quill.min.js"></script>

To create an editor using Quill, add the following code:

<div id="quillExample" class="quill-container"></div> <script> var quill = new Quill('#quillExample', { modules: { toolbar: [ [{ header: [1, 2, false] }], ['bold', 'italic', 'underline'], ['image', 'code-block'] ] }, placeholder: 'Compose an epic...', theme: 'snow' // or 'bubble' }); </script>

Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate.

#### Usage

To use ace editor in your application, include the following files in <body>.

<script src="path-to/node_modules/ace-builds/src/ace.js"></script> <script src="path-to/node_modules/ace-builds/src-min/mode-javascript.js"></script> <script src="path-to/node_modules/ace-builds/src-min/theme-chaos.js"></script><!--Choose any theme you wish-->

To create a code editor using ace with a sample code, add the following code:

<div id="aceExample" class="ace-editor"> var x = add(4, 3); // Function is called, return value will end up in x function add(a, b) { return a + b; // Function returns the sum of a and b } var y = mul(4, 3); // Function is called, return value will end up in y function add(a, b) { return a * b; // Function returns the product of a and b } </div> <script> var editor = ace.edit("aceExample"); editor.setTheme("ace/theme/chaos"); //set theme editor.getSession().setMode("ace/mode/javascript"); //set mode document.getElementById('aceExample').style.fontSize='1rem'; //styling </script>

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.

#### Usage

To use CodeMirror in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/codemirror/lib/codemirror.css" /> <link rel="stylesheet" href="path-to/node_modules/codemirror/theme/ambiance.css" /><!--Choose a theme you wish-->

Add the following script files in <body>.

<script src="path-to/node_modules/codemirror/lib/codemirror.js"></script> <script src="path-to/node_modules/codemirror/mode/javascript/javascript.js"></script>

Here is an example of an editor using CodeMirror.

<textarea rows="4" cols="50" name="code-editable" id="code-editable"> <script> var x = 3; var y = 4; var z = x + y; </script> </textarea> <script> var editableCodeMirror = CodeMirror.fromTextArea(document.getElementById('code-editable'), { mode: "javascript", theme: "ambiance", lineNumbers: true }); </script>