Top

Component

Basic UI Elements
<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>

To use another types button you have to link the related css file according to types of buttons in a head tag

PrimarySecondarySuccessInfoWarningDangerLightDark 
<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>
<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>
<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>
Dismissible popover 
<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="{{ asset('assets/js/popover-custom.js') }}"></script>
<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="{{ asset('assets/js/tooltip-init.js') }}"></script>

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>
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.
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.
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 aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
<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 Elements
To use java script you have to add the following style and script tag 
<!--Scrollable css-->
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/scrollable.css') }}">
<!--scrollable js-->
<script src="{{ asset('assets/js/scrollable/scrollable-custom.js') }}"></script>
<script src="{{ asset('assets/js/scrollable/perfect-scrollbar.min.js') }}" ></script>
To use java script you have to add the following style and script tag 
<!-- Tree css -->
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/tree.css') }}">
<!-- Tree js-->
<script src="{{ asset('assets/js/tree/jstree.min.js') }}"></script>
<script src="{{ asset('assets/js/tree/tree.js') }}" ></script>
To use java script you have to add the following script tag 
<!-- bootstrap notify js -->
<script src="{{ asset('assets/js/notify/bootstrap-notify.min.js') }}" ></script>
<script src="{{ asset('assets/js/notify/notify-script.js') }}" ></script>
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="{{ asset('assets/css/rating.css') }}">
<!-- Ion Range Slider js -->
<script src="{{ asset('assets/js/rating/jquery.barrating.js') }}" ></script>
<script src="{{ asset('assets/js/rating/rating-script.js') }}" ></script>
To use java script you have to add the following style and script tag 
<!-- Dropzone start here -->
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/dropzone.css') }}">
<!-- Dropzone js -->
<script src="{{ asset('assets/js/dropzone/dropzone.js') }}" ></script>
<script src="{{ asset('assets/js/dropzone/dropzone-script.js') }}" ></script>
To use java script you have to add the following style and script tag 
<!-- tour js -->
<script src="{{ asset('assets/js/tour/intro.js') }}" ></script>
<script src="{{ asset('assets/js/tour/intro-init.js') }}" ></script>
To use java script you have to add the following style and script tag 
<!-- Sweet alert jquery-->
<script src="{{ asset('assets/js/sweet-alert/sweetalert.min.js') }}" ></script>
<script src="{{ asset('assets/js/sweet-alert/app.js') }}" ></script>
To use java script you have to add the following css and script tag 
<!-- animate css -->
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/animate.css') }}">
<!-- Modal js-->
<script src="{{ asset('assets/js/modal-animated.js') }}"></script>
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="{{ asset('assets/css/range-slider.css') }}">
<!-- Ion Range Slider js -->
<script src="{{ asset('assets/js/range-slider/ion.rangeSlider.min.js') }}"></script>
<script src="{{ asset('assets/js/range-slider/rangeslider-script.js') }}" ></script>
To use java script you have to add the following style and script tag 
<!--Image cropper css-->
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/image-cropper.css') }}">
<!--Cropper jquery-->
<script src="{{ asset('assets/js/image-cropper/cropper.js') }}"></script>
<script src="{{ asset('assets/js/image-cropper/cropper-main.js') }}"></script>
To use java script you have to add the following style and script tag 
<!-- sticky css -->
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/sticky.css') }}">
<!--Sticky note js-->
<script src='{{ asset('assets/js/sticky/sticky.js') }}'></script>
Animations
To use java script you have to add the following style and script tag 
<!-- animate custom js -->
<script src="{{ asset('assets/js/animation/animate-custom.js') }}" ></script>
<!-- Animate icon -->
<link rel="stylesheet" href="{{ asset('assets/css/animate.css') }}">
To use java script you have to add the following script tag
<!-- Scroll Reveal jquery-->
<script src="{{ asset('assets/js/animation/scroll-reveal/scrollreveal.min.js') }}"></script>
<script src="{{ asset('assets/js/modernizr.js') }}" ></script>
To use java script you have to add the following style and script tag 
<!-- AOS icon -->
<link rel="stylesheet" type="text/css" href="{{ 'asset(assets/css/aos.css') }}">
<!-- AOS js-->
<script src="{{ asset('assets/js/isotope.pkgd.js') }}"></script>
<script src="{{ asset('assets/js/animation/aos/aos.js') }}" ></script>
<script src="{{ asset('assets/js/animation/aos/aos-init.js') }}" ></script>
To use java script you have to add the following script tag
<!-- Tilt js-->
<script src="{{ asset('assets/js/animation/tilt/tilt.jquery.js') }}"></script>
<script src="{{ asset('assets/js/animation/tilt/tilt-custom.js') }}"></script>
To use java script you have to add the following style and script tag 
<!-- WOW js-->
<script src="{{ asset('assets/js/wow/wow.min.js') }}" ></script>
<script src="{{ asset('assets/js/wow/wow-init.js') }}" ></script>
Icons

To use another types button you have to link the related css file according to types of buttons in a head tag

Forms
To use java script you have to add the following script tag
<script src="{{ asset('assets/js/form-validation-custom.js') }}" ></script>
Tables
Id First Name Last Name Username Designation Company Language Country
1 Ram Jacob Wolfe RamJacob@twitter Developer Apple Inc. Php IND
2 John Deo Gummer JohnDeo@twitter Designer Hewlett packard Html US
3 Elana John Cazale ElanaJohn@twitter Designer Microsoft Pug UK
4 Meryl Streep Roberts MerylStreep@twitter Developer Tata Ltd. React IDN
5 Emma Stone Stone EmmaStone@twitter Developer Wipro Ltd. Vue IRN
6 Eliana Jons Jons ElianaJons@twitter Developer Info Ltd. Vue IRN 
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Id</th>
        <th scope="col">First Name</th>
        <th scope="col">Last Name</th>
        <th scope="col">Username</th>
        <th scope="col">Designation</th>
        <th scope="col">Company</th>
        <th scope="col">Language</th>
        <th scope="col">Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
          <th scope="row">1</th>
          <td><img class="img-30 me-2" src="{{ asset('assets/images/users/1.png') }}" alt="" /> Ram Jacob</td>
          <td>Wolfe</td>
          <td>RamJacob@twitter</td>
          <td>Developer</td>
          <td>Apple Inc.</td>
          <td><span class="badge badge-light-danger">Php<span></td>
          <td>IND</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td><img class="img-30 me-2" src="{{ asset('assets/images/users/2.png') }}" alt="" /> John Deo</td>
        <td>Gummer</td>
        <td>JohnDeo@twitter</td>
        <td>Designer</td>
        <td>Hewlett packard</td>
        <td><span class="badge badge-light-primary">Html<span></td>
        <td>US</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td><img class="img-30 me-2" src="{{ asset('assets/images/users/3.png') }}" alt="" /> Elana John</td>
        <td>Cazale</td>
        <td>ElanaJohn@twitter</td>
        <td>Designer</td>
        <td>Microsoft</td>
        <td><span class="badge badge-light-danger">Pug<span></td>
        <td>UK</td>
      </tr>
      <tr>
        <td><img class="img-30 me-2" src="{{ asset('assets/images/users/4.png') }}" alt="" /> Meryl Streep</td>
        <td>Roberts</td>
        <td>MerylStreep@twitter</td>
        <td>Developer</td>
        <td>TataLtd.</td>
        <td><span class="badge badge-light-success">React<span></td>
        <td>IND</td>
      </tr>
      <tr>
        <th scope="row">5</th>
        <td><img class="img-30 me-2" src="{{ asset('assets/images/users/1.png') }}" alt="" /> Emma Stone</td>
        <td>Stone</td>
        <td>EmmaStone@twitter</td>
        <td>Developer</td>
        <td>Wipro Ltd.</td>
        <td><span class="badge badge-light-primary">Vue<span></td>
        <td>IRN</td>
      </tr>
      <tr>
        <th scope="row">6</th>
        <td><img class="img-30 me-2" src="{{ asset('assets/images/users/2.png') }}" alt="" /> Eliana Jons</td>
        <td>Jons</td>
        <td>ElianaJons@twitter</td>
        <td>Developer</td>
        <td>Info Ltd.</td>
        <td><span class="badge badge-light-success">Vue<span></td>
        <td>IRN</td>
      </tr>
    </tbody>
  </table>
</div>
To use java script you have to add the following script tag
<script src="{{ asset('assets/js/datatable/datatables/jquery.dataTables.min.js') }}" ></script>
<script src="{{ asset('assets/js/datatable/datatables/datatable.custom.js') }}" ></script>
To use java script you have to add the following style and script tag 
<!--JSGrid css-->
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/datatables.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/datatable-extension.css') }}">
<!--Datatable extension js-->
<script src="{{ asset('assets/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/jszip.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/pdfmake.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/vfs_fonts.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.autoFill.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.select.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/buttons.print.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/buttons.html5.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.keyTable.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/custom.js') }}"></script>
Cards
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>
To use java script you have to add the following script tag
<!--Sortable JS-->
<script src="{{ asset('assets/js/jquery.ui.min.js') }}"></script>
<script src="{{ asset('assets/js/dragable/sortable.js') }}"></script>
<script src="{{ asset('assets/js/dragable/sortable-custom.js') }}"></script>
Creative 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 

<div class="card b-l-primary">
 <div class="card-header">
 <h5>primary-gradient</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 java script you have to add the following script tag
<!-- Timeline js-->
<script src="{{ asset('assets/js/timeline/timeline-v-1/main.js') }}" ></script>
<script src="{{ asset('assets/js/modernizr.js') }}" ></script>
To use java script you have to add the following script tag
<!-- Timeline js-->
<script src="{{ asset('assets/js/timeline/timeline-v-2/jquery.timeliny.min.js') }}"></script>
<script src="{{ asset('assets/js/timeline-v-2/timeline-v-2-custom.js') }}" ></script>
Charts
To use java script you have to add the following script tag
<!-- google Chart JS-->
<script src="{{ asset('assets/js/chart/google/google-chart-loader.js') }}"></script>
<script src="{{ asset('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="{{ asset('assets/js/chart/sparkline/sparkline.js') }}"></script>
<script src="{{ asset('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="{{ asset('assets/js/chart/flot-chart/excanvas.js') }}"></script>
<script src="{{ asset('assets/js/chart/flot-chart/jquery.flot.js') }}"></script>
<script src="{{ asset('assets/js/chart/flot-chart/jquery.flot.time.js') }}"></script>
<script src="{{ asset('assets/js/chart/flot-chart/jquery.flot.symbol.js') }}"></script>
<script src="{{ asset('assets/js/chart/flot-chart/jquery.flot.categories.js') }}"></script>
<script src="{{ asset('assets/js/chart/flot-chart/jquery.flot.stack.js') }}"></script>
<script src="{{ asset('assets/js/chart/flot-chart/flot-script.js') }}"></script>
<script src="{{ asset('assets/js/chart/flot-chart/jquery.flot.pie.js') }}"></script>
<script src="{{ asset('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="{{ asset('assets/js/chart/peity-chart/peity.jquery.js') }}"></script>
<script src="{{ asset('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="{{ asset('assets/js/chart/morris-chart/raphael.js') }}"></script>
<script src="{{ asset('assets/js/chart/morris-chart/morris.js') }}"></script>
<script src="{{ asset('assets/js/chart/morris-chart/prettify.min.js') }}"></script>
<script src="{{ asset('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="{{ asset('assets/js/chart/chartjs/chart.min.js') }}"></script>
<script src="{{ asset('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="{{ asset('assets/css/chartist.css') }}">
<!-- Chartist -->
<script src="{{ asset('assets/js/chart/chartist/chartist.js') }}"></script>
<script src="{{ asset('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="{{ asset('assets/js/chart/knob/knob.min.js') }}"></script>
<script src="{{ asset('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="{{ asset('assets/js/chart/apex-chart/apex-chart.js') }}"></script>
<script src="{{ asset('assets/js/chart/apex-chart/stock-prices.js') }}"></script>
<script src="{{ asset('assets/js/chart/apex-chart/chart-custom.js') }}"></script>
Maps
To use java script you have to add the following script tag
<!--Map css-->
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/mapsjs-ui.css') }}">
<!-- Map js-->
<script src="{{ asset('assets/js/map-js/mapsjs-core.js') }}"></script>
<script src="{{ asset('assets/js/map-js/mapsjs-service.js') }}"></script>
<script src="{{ asset('assets/js/map-js/mapsjs-ui.js') }}"></script>
<script src="{{ asset('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="{{ asset('assets/css/vector-map.css') }}">
<!--vector map js-->
<script src="{{ asset('assets/js/vector-map/jquery-jvectormap-2.0.2.min.js') }}"></script>
<script src="{{ asset('assets/js/vector-map/map/jquery-jvectormap-world-mill-en.js') }}"></script>
<script src="{{ asset('assets/js/vector-map/map/jquery-jvectormap-us-aea-en.js') }}"></script>
<script src="{{ asset('assets/js/vector-map/map/jquery-jvectormap-uk-mill-en.js') }}"></script>
<script src="{{ asset('assets/js/vector-map/map/jquery-jvectormap-au-mill.js') }}"></script>
<script src="{{ asset('assets/js/vector-map/map/jquery-jvectormap-chicago-mill-en.js') }}"></script>
<script src="{{ asset('assets/js/vector-map/map/jquery-jvectormap-in-mill.js') }}"></script>
<script src="{{ asset('assets/js/vector-map/map/jquery-jvectormap-asia-mill.js') }}"></script>
<script src="{{ asset('assets/js/vector-map/map-vector.js') }}"></script>
Editors
To use css and java script you have to add the following style and script tag
<!-- Summernote css -->
<link rel="stylesheet" href="{{ asset('assets/css/summernote.css') }}">
<!--Summer-note js-->
<script src="{{ asset('assets/js/editor/summernote/summernote.js') }}"></script>
<script src="{{ asset('assets/js/editor/summernote/summernote.custom.js') }}"></script>
To use java script you have to add the following script tag
<!--ckeditor js-->
<script src="{{ asset('assets/js/editor/ckeditor/ckeditor.js') }}"></script>
<script src="{{ asset('assets/js/editor/ckeditor/styles.js') }}"></script>
<script src="{{ asset('assets/js/editor/ckeditor/adapters/jquery.js') }}"></script>
<script src="{{ asset('assets/js/editor/ckeditor/ckeditor.custom.js') }}"></script>
To use css and java script you have to add the following style and script tag
<!-- Simple-MDE css -->
<link rel="stylesheet prefetch" href="{{ asset('assets/css/simple-mde.css') }}">
<!-- Simple MDE editor jquery-->
<script src="{{ asset('assets/js/simple-mde/simplemde.min.js') }}"></script>
<script src="{{ asset('assets/js/simple-mde/simplemde.custom.js') }}"></script>
To use css and java script you have to add the following style and script tag
<!--ace code editor js-->
<script src="{{ asset('assets/js/ace-editor/ace.js') }}"></script>
<script src="{{ asset('assets/js/ace-editor/ace-custom.js') }}"></script>