Component
Basic UI Elements
Buttons Preview link
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-light">Light Button</button>
Tag & pills Preview link
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning text-dark">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light text-dark">Light</span>
<span class="badge badge-dark tag-pills-sm-mb">Dark</span>
Progressbar Preview link
<div class="progress mb-2">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
<div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
<div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
</div>
Alert Preview link
<div class="alert alert-primary" role="alert">This is a info alert—check it out!</div>
<div class="alert alert-secondary" role="alert">This is a light alert—check it out!</div>
<div class="alert alert-success" role="alert">This is a success alert—check it out!</div>
<div class="alert alert-info" role="alert">This is a danger alert—check it out!</div>
<div class="alert alert-warning" role="alert">This is a secondary alert—check it out!</div>
<div class="alert alert-danger" role="alert">This is a warning alert—check it out!</div>
<div class="alert alert-light" role="alert">This is a dark alert—check it out!</div>
<div class="alert alert-dark" role="alert">This is a dark alert—check it out!</div>
Popover Preview link
<button type="button" class="btn btn-primary example-popover mr-1" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<a tabindex="0" class="example-popover btn btn-secondary" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
<button type="button" data-bs-trigger="hover" class="example-popover btn btn-success" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" title="Popover title" data-offset="-20px -20px" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." >On Hover Tooltip</button>
To use java script you have to add the following script tag
<!--popover js-->
<script src="../assets/js/popover-custom.js"></script>
Tooltip Preview link
<button type="button" class="example-popover btn btn-primary" data-bs-container="body" data-bs-toggle="tooltip" data-bs-placement="top" title="Popover title" >Hover Me</button>
To use java script you have to add the following script tag
<!--tooltip js-->
<script src="../assets/js/tooltip-init.js"></script>
Dropdown Preview link
<div class="dropdown-basic">
<div class="dropdown">
<button type="button" class="dropbtn btn-primary">Dropdown Button <span><i class="icofont icofont-arrow-down"></i></span></button>
<div class="dropdown-content">
<a href="#">Action</a>
<a href="#">Another Action</a>
<a href="#">Something Else Here</a>
</div>
</div>
</div>
Tab Preview link
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
<ul class="nav nav-tabs" id="myTab3" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">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>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tabs" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent3">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<p class="mb-0 m-t-30">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<p class="mb-0 m-t-30">
...
</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<p class="mb-0 m-t-30">
...
</p>
</div>
</div>
Accordion Preview link
<div id="accordion" class="default-according">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #
<span class="digits">1</span>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion">
<div class="card-body">
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.
</div>
</div>
</div>
<div class="card">
...
</div>
<div class="card">
...
</div>
</div>
Advance UI Element
Scrollable Offical link Preview link
To use java script you have to add the following style and script tag
<!--Scrollable css-->
<link rel="stylesheet" type="text/css" href="../assets/css/scrollable.css">
<!--scrollable js-->
<script src="../assets/js/scrollable/scrollable-custom.js"></script>
<script src="../assets/js/scrollable/perfect-scrollbar.min.js" ></script>
Tree Offical link Preview link
To use java script you have to add the following style and script tag
<!-- Tree css -->
<link rel="stylesheet" type="text/css" href="../assets/css/tree.css">
<!-- Tree js-->
<script src="../assets/js/tree/jstree.min.js"></script>
<script src="../assets/js/tree/tree.js" ></script>
Notify Offical link Preview link
To use java script you have to add the following script tag
<!-- bootstrap notify js -->
<script src="../assets/js/notify/bootstrap-notify.min.js" ></script>
<script src="../assets/js/notify/notify-script.js" ></script>
Rating Offical link Preview link
To use java script you have to add the following style and script tag
<!-- range slider css start here -->
<link rel="stylesheet" type="text/css" href="../assets/css/rating.css">
<!-- Ion Range Slider js -->
<script src="../assets/js/rating/jquery.barrating.js" ></script>
<script src="../assets/js/rating/rating-script.js" ></script>
Dropzone Offical link Preview link
To use java script you have to add the following style and script tag
<!-- Dropzone start here -->
<link rel="stylesheet" type="text/css" href="../assets/css/dropzone.css">
<!-- Dropzone js -->
<script src="../assets/js/dropzone/dropzone.js" ></script>
<script src="../assets/js/dropzone/dropzone-script.js" ></script>
Tour Offical link Preview link
To use java script you have to add the following style and script tag
<!-- tour js -->
<script src="../assets/js/tour/intro.js" ></script>
<script src="../assets/js/tour/intro-init.js" ></script>
Sweetalert Offical link Preview link
To use java script you have to add the following style and script tag
<!-- Sweet alert jquery-->
<script src="../assets/js/sweet-alert/sweetalert.min.js" ></script>
<script src="../assets/js/sweet-alert/app.js" ></script>
Animated modal Offical link Preview link
To use java script you have to add the following css and script tag
<!-- animate css -->
<link rel="stylesheet" type="text/css" href="../assets/css/animate.css">
<!-- Modal js-->
<script src="../assets/js/modal-animated.js"></script>
Owl carousel Offical link Preview link
To use java script you have to add the following style and script tag
<!-- Owl css -->
<link rel="stylesheet" type="text/css" href="../assets/css/owlcarousel.css">
<!-- owlcarousel js-->
<script src="../assets/js/owlcarousel/owl.carousel.js" ></script>
Range slider Offical link Preview link
To use java script you have to add the following style and script tag
<!-- range slider css start here -->
<link rel="stylesheet" type="text/css" href="../assets/css/range-slider.css">
<!-- Ion Range Slider js -->
<script src="../assets/js/range-slider/ion.rangeSlider.min.js"></script>
<script src="../assets/js/range-slider/rangeslider-script.js" ></script>
Image cropper Offical link Preview link
To use java script you have to add the following style and script tag
<!--Image cropper css-->
<link rel="stylesheet" type="text/css" href="../assets/css/image-cropper.css">
<!--Cropper jquery-->
<script src="../assets/js/image-cropper/cropper.js"></script>
<script src="../assets/js/image-cropper/cropper-main.js"></script>
Animations
Animate Offical link Preview link
To use java script you have to add the following style and script tag
<!-- animate custom js -->
<script src="../assets/js/animate-custom.js" ></script>
<!-- Animate icon -->
<link rel="stylesheet" href="../assets/css/animate.css">
Scroll reveal Offical link Preview link
To use java script you have to add the following script tag
<!-- Scroll Reveal jquery-->
<script src="../assets/js/scroll-reveal/scrollreveal.min.js"></script>
<script src="../assets/js/modernizr.js" ></script>
AOS Offical link Preview link
To use java script you have to add the following style and script tag
<!-- AOS icon -->
<link rel="stylesheet" type="text/css" href="../assets/css/aos/aos.css">
<!-- AOS js-->
<script src='../assets/js/isotope.pkgd.js'></script>
<script src="../assets/js/aos/aos.js" ></script>
<script src="../assets/js/aos/aos-init.js" ></script>
Tilt Offical link Preview link
To use java script you have to add the following script tag
<!-- Tilt js-->
<script src="../assets/js/tilt/tilt.jquery.js"></script>
<script src="../assets/js/tilt/tilt-custom.js"></script>
WOW Offical link Preview link
To use java script you have to add the following style and script tag
<!-- WOW js-->
<script src="../assets/js/wow/wow.min.js" ></script>
<script src="../assets/js/wow/wow-init.js" ></script>
Icons
Flag Icons Offical link Preview link
You have to add the following style and add flag-icon folder in your fonts folder
<!-- flag icon css -->
<link rel="stylesheet" type="text/css" href="../assets/css/vendors/flag-icon.css" ></link>
<!-- some icon display for demo -->
<i class="flag-icon flag-icon-in mx-1"></i>
<i class="flag-icon flag-icon-ad mx-1"></i>
<i class="flag-icon flag-icon-ae mx-1"></i>
<i class="flag-icon flag-icon-af mx-1"></i>
Font awesome Offical link Preview link
You have to add the following style and add font-awesome folder in your fonts folder
<!-- font awesome css -->
<link rel="stylesheet" type="text/css" href="../assets/css/font-awesome.css" ></link>
<!-- some icon display for demo -->
<i class="fa fa-bluetooth mx-1"></i>
<i class="fa fa-bitcoin mx-1"></i>
<i class="fa fa-anchor mx-1"></i>
<i class="fa fa-text-height mx-1"></i>
Ico icon Offical link Preview link
You have to add the following style and add ico folder in your fonts folder
<!-- ico icon css -->
<link rel="stylesheet" type="text/css" href="../assets/css/vendors/icofont.css" ></link>
<!-- some icon display for demo -->
<i class="icofont icofont-bow mx-1"></i>
<i class="icofont icofont-animal-dolphin mx-1"></i>
<i class="icofont icofont-brand-apple mx-1"></i>
<i class="icofont icofont-bank-alt mx-1"></i>
To use another types of ico icons you have to refer below template link
Preview Page: https://admin.pixelstrap.net/yuri/template/ico-icon.html
Themify Offical link Preview link
You have to add the following style and add themify folder in your fonts folder
<!-- themify icon css -->
<link rel="stylesheet" type="text/css" href="../assets/css/vendors/themify.css" ></link>
<!-- some icon display for demo -->
<i class="icon-fullscreen mx-1"></i>
<i class="icon-save-alt mx-1"></i>
<i class="icon-volume mx-1"></i>
<i class="icon-instagram mx-1"></i>
Feather icon Offical link Preview link
You have to add the following style and add feather folder in your fonts folder
<!-- feather icon css -->
<link rel="stylesheet" type="text/css" href="../assets/css/vendors/feather-icon.css" ></link>
<!-- some icon display for demo -->
<i data-feather="activity" class="mx-1"></i>
<i data-feather="image" class="mx-1"></i>
<i data-feather="phone-forwarded" class="mx-1"></i>
<i data-feather="wind" class="mx-1"></i>
Cards
Basic cards Preview link
Basic Card
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
<div class="card">
<div class="card-header">
<h5>Basic Card</h5>
</div>
<div class="card-body">
<p class="mb-0"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. </p>
</div>
</div>
Draggable cards Preview link
To use draggable card you have to add the following script js
<!--Sortable JS-->
<script src="../assets/js/dragable/jquery.ui.min.js"></script>
<script src="../assets/js/dragable/sortable.js"></script>
<script src="../assets/js/dragable/sortable-custom.js"></script>
Theme card Preview link
Basic Card
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
<div class="card">
<div class="card-header b-l-primary">
<h5>Basic Card</h5>
</div>
<div class="card-body">
<p class="mb-0"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. </p>
</div>
</div>
Timeline
To use timeline you have to add the following script js files
<!-- Timeline js-->
<script src="../assets/js/timeline-v-1/main.js" ></script>
<script src="../assets/js/modernizr.js" ></script>
Charts
To use java script you have to add the following script tag
<!-- google Chart JS-->
<script src="../assets/js/chart/google/google-chart-loader.js"></script>
<script src="../assets/js/chart/google/google-chart.js"></script>
To use java script you have to add the following script tag
<!--Sparkline Chart JS-->
<script src="../assets/js/chart/sparkline/sparkline.js"></script>
<script src="../assets/js/chart/sparkline/sparkline-script.js"></script>
To use java script you have to add the following style and script tag
<!-- flot Chart JS-->
<script src="../assets/js/chart/flot-chart/excanvas.js"></script>
<script src="../assets/js/chart/flot-chart/jquery.flot.js"></script>
<script src="../assets/js/chart/flot-chart/jquery.flot.time.js"></script>
<script src="../assets/js/chart/flot-chart/jquery.flot.symbol.js"></script>
<script src="../assets/js/chart/flot-chart/jquery.flot.categories.js"></script>
<script src="../assets/js/chart/flot-chart/jquery.flot.stack.js"></script>
<script src="../assets/js/chart/flot-chart/flot-script.js"></script>
<script src="../assets/js/chart/flot-chart/jquery.flot.pie.js"></script>
<script src="../assets/js/chart/flot-chart/jquery.flot.symbol.js"></script>
To use java script you have to add the following script tag
<!--Sparkline Chart JS-->
<script src="../assets/js/chart/peity-chart/peity.jquery.js"></script>
<script src="../assets/js/chart/peity-chart/peity-custom.js"></script>
To use java script you have to add the following script tag
<!-- Morris Chart JS-->
<script src="../assets/js/chart/morris-chart/raphael.js"></script>
<script src="../assets/js/chart/morris-chart/morris.js"></script>
<script src="../assets/js/chart/morris-chart/prettify.min.js"></script>
<script src="../assets/js/chart/morris-chart/morris-script.js"></script>
To use java script you have to add the following script tag
<!-- Chart JS-->
<script src="../assets/js/chart/chartjs/chart.min.js"></script>
<script src="../assets/js/chart/chartjs/chart.custom.js"></script>
To use css and java script you have to add the following style and script tag
<!-- Chartist -->
<link rel="stylesheet" type="text/css" href="../assets/css/chartist.css">
<!-- Chartist -->
<script src="../assets/js/chart/chartist/chartist.js"></script>
<script src="../assets/js/chart/chartist/chartist-custom.js"></script>
To use java script you have to add the following script tag
<!--Knob Chart JS-->
<script src="../assets/js/chart/knob/knob.min.js"></script>
<script src="../assets/js/chart/knob/knob-chart.js"></script>
To use java script you have to add the following script tag
<!-- Apex Chart JS-->
<script src="../assets/js/chart/apex-chart/apex-chart.js"></script>
<script src="../assets/js/chart/apex-chart/stock-prices.js"></script>
<script src="../assets/js/chart/apex-chart/chart-custom.js"></script>
To use java script you have to add the following script tag
<!-- Echart css -->
<link rel="stylesheet" type="text/css" href="../assets/css/vendors/echart.css">
<!-- Echart JS-->
<script src="../assets/js/chart/echart/esl.js"></script>
<script src="../assets/js/chart/echart/config.js"></script>
<script src="../assets/js/chart/echart/pie-chart/facePrint.js"></script>
<script src="../assets/js/chart/echart/pie-chart/testHelper.js"></script>
<script src="../assets/js/chart/echart/pie-chart/custom-transition-texture.js"></script>
<script src="../assets/js/chart/echart/data/symbols.js"></script>
<script src="../assets/js/chart/echart/custom.js"></script>
To use echart you have to add the following style file
<!-- Echarts -->
<link rel="stylesheet" type="text/css" href="../assets/css/vendors/echart.css">
Maps
To use java script you have to add the following script tag
<!--Map css-->
<link rel="stylesheet" type="text/css" href="../assets/css/mapsjs-ui.css">
<!-- Map js-->
<script src="../assets/js/map-js/mapsjs-core.js"></script>
<script src="../assets/js/map-js/mapsjs-service.js"></script>
<script src="../assets/js/map-js/mapsjs-ui.js"></script>
<script src="../assets/js/map-js/mapsjs-mapevents.js"></script>
To use css and java script you have to add the following style and script tag
<!--Vector Map css-->
<link rel="stylesheet" type="text/css" href="../assets/css/vector-map.css">
<!--vector map js-->
<script src="../assets/js/vector-map/jquery-jvectormap-2.0.2.min.js"></script>
<script src="../assets/js/vector-map/map/jquery-jvectormap-world-mill-en.js"></script>
<script src="../assets/js/vector-map/map/jquery-jvectormap-us-aea-en.js"></script>
<script src="../assets/js/vector-map/map/jquery-jvectormap-uk-mill-en.js"></script>
<script src="../assets/js/vector-map/map/jquery-jvectormap-au-mill.js"></script>
<script src="../assets/js/vector-map/map/jquery-jvectormap-chicago-mill-en.js"></script>
<script src="../assets/js/vector-map/map/jquery-jvectormap-in-mill.js"></script>
<script src="../assets/js/vector-map/map/jquery-jvectormap-asia-mill.js"></script>
<script src="../assets/js/vector-map/map-vector.js"></script>
Editors
Ace code Offical link Preview link
<div class="ace-editor" id="editor">
/* Sample JavaScript edit source */
// Define a module
var app = angular.module('app', ['ui.bootstrap']);
// Define a conroller.
app.controller('GrokController', ['$scope', '$filter',
function($scope, $filter) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.isOpened = false;
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.isOpened = true;
};
}]);
/* End of sample edit source */
</div>
To use ace code you have to add the following script files
<!-- ace code editor js -->
<script src="../assets/js/editor/ace-editor/ace.js"></script>
<script src="../assets/js/editor/ace-editor/ace-custom.js"></script>
<script src="../assets/js/editor/ace-editor/mode-css.js"></script>
<script src="../assets/js/editor/ace-editor/mode-html.js"></script>
<script src="../assets/js/editor/ace-editor/mode-javascript.js"></script>
<script src="../assets/js/editor/ace-editor/mode-php.js"></script>
<script src="../assets/js/editor/ace-editor/theme-monokai.js"></script>
<script src="../assets/js/editor/ace-editor/worker-css.js"></script>
<script src="../assets/js/editor/ace-editor/worker-html.js"></script>
<script src="../assets/js/editor/ace-editor/worker-javascript.js"></script>
<script src="../assets/js/editor/ace-editor/worker-php.js"></script>
Quilljs Editor Offical link Preview link
<div class="toolbar-box">
<div id="toolbar7"><span class="ql-formats">
<select class="ql-size">
<option value="small">Small</option>
<option selected="">Normal</option>
<option value="large">Large</option>
<option value="huge">Huge</option>
</select></span><span class="ql-formats">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
<button class="ql-underline">Underline</button>
<button class="ql-strike">Strike</button>
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button></span><span class="ql-formats">
<button class="ql-header" value="1"></button>
<button class="ql-header" value="2"></button></span><span class="ql-formats">
<button class="ql-list" value="ordered">List</button>
<button class="ql-list" value="bullet">Bullet</button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button></span><span class="ql-formats">
<button class="ql-link">Link</button>
<button class="ql-image">Image</button>
<button class="ql-video">Video</button>
<select class="ql-color"></select>
<select class="ql-background"></select></span>
<!-- Add more options here--><span class="ql-formats">
<button class="ql-blockquote">Blockquote</button>
<button class="ql-code-block"></button></span><span class="ql-formats">
<button class="ql-align" value=""></button>
<button class="ql-align" value="center"></button>
<button class="ql-align" value="right"></button>
<button class="ql-align" value="justify"></button></span><span class="ql-formats">
<button class="ql-clean"></button></span>
</div>
<div class="quill-paragraph" id="editor7">
<p>There was a road along with that open place. When the tiger saw any man passing by he said to him, “Brother, here is a good bangle. I wish to give it to you. Don’t fear. lam old and infirm now. I now pray to God five times a day and doing it will be useful to you. Don’t fear, come to me and take other religious acts. This bangle is useless to me. It will be useful to you. Don’t fear, come to me and take this.”</p>
</div>
</div>
To use ace code you have to add the following script files
<!-- quill js -->
<script src="../assets/js/custom-quill.js"></script>
<script src="../assets/js/vendors/quill/dist/quill.min.js"></script>
<script src="../assets/js/vendors/quill/dist/quill.js"></script>
To use simple mde you have to add the following style files
<!-- quill-css -->
<link rel="stylesheet prefetch" href="../assets/css/vendors/quill/dist/quill.snow.css">
<link rel="stylesheet prefetch" href="../assets/css/vendors/quill/dist/quill.bubble.css">