Item Name: Discover Admin Template
Author: Bootstrap Gallery
Version: v1.0
Thank you for your interest in Discover Admin Template. This documentation is to help you regarding each step of customization and get you started. Please go through the documentation carefully to understand how this template is made and how to edit this properly. HTML5, CSS3 knowledge is required to customize this template.
Discover Admin template contains unique features.
Note:
- For Default layout please refer default.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Admin Dashboard Templates - Discover Admin Template</title>
<!-- *************
************ CSS Files *************
************* -->
<link rel="stylesheet" href="assets/fonts/bootstrap/bootstrap-icons.min.css" />
<link rel="stylesheet" href="assets/css/main.min.css" />
<!-- *************
************ Vendor Css Files *************
************ -->
<!-- Scrollbar CSS -->
<link rel="stylesheet" href="assets/vendor/overlay-scroll/OverlayScrollbars.min.css" />
</head>
<body>
<!-- Page wrapper start -->
<div class="page-wrapper">
<!-- Main container start -->
<div class="main-container">
<!-- Sidebar wrapper start -->
<nav id="sidebar" class="sidebar-wrapper">
<!-- App brand starts -->
<div class="app-brand px-3 py-2 d-flex align-items-center">
<a href="index.html">
<img src="assets/images/logo.svg" class="logo" alt="Bootstrap Gallery" />
</a>
</div>
<!-- App brand ends -->
<!-- Sidebar profile starts -->
<div class="sidebar-profile">
</div>
<!-- Sidebar profile ends -->
<!-- Sidebar menu starts -->
<div class="sidebarMenuScroll">
<ul class="sidebar-menu">
<!-- Default Link -->
<li>
<a href="index.html">
<i class="bi bi-pie-chart"></i>
<span class="menu-text">Dashboard</span>
</a>
</li>
<!-- Default Link Active -->
<li>
<a href="analytics.html">
<i class="bi bi-bar-chart-line"></i>
<span class="menu-text">Analytics</span>
</a>
</li>
<!-- Treeview -->
<li class="treeview">
<a href="#!">
<i class="bi bi-window-sidebar"></i>
<span class="menu-text">Invoices</span>
</a>
<ul class="treeview-menu">
<li>
<a href="create-invoice.html">Create Invoice</a>
</li>
<li>
<a href="view-invoice.html">View Invoice</a>
</li>
</ul>
</li>
<!-- Treeview Active and Current Page -->
<li class="treeview active current-page">
<a href="#!">
<i class="bi bi-code-square"></i>
<span class="menu-text">Cards</span>
</a>
<ul class="treeview-menu">
<li>
<a href="cards.html">Cards</a>
</li>
<li>
<a href="advanced-cards.html" class="active-sub">Advanced Cards</a>
</li>
</ul>
</li>
<!-- Multi Level Menu -->
<li class="treeview">
<a href="#!">
<i class="bi bi-code-square"></i>
<span class="menu-text">Nested Menu</span>
</a>
<ul class="treeview-menu">
<li>
<a href="#!">Nested 1</a>
</li>
<li>
<a href="#!">
Nested 2
<i class="bi bi-caret-right-fill"></i>
</a>
<ul class="treeview-menu">
<li>
<a href="#!">Nested 2.1</a>
</li>
<li>
<a href="#!">Nested 2.2
<i class="bi bi-caret-right-fill"></i>
</a>
<ul class="treeview-menu">
<li>
<a href="#!">Nested 2.2.1</a>
</li>
<li>
<a href="#!">Nested 2.2.2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- Sidebar menu ends -->
</nav>
<!-- Sidebar wrapper end -->
<!-- App container starts -->
<div class="app-container">
<!-- App header starts -->
<div class="app-header">
<!-- Toggle buttons start -->
<div class="d-flex">
<button class="btn btn-outline-info btn-sm me-3 toggle-sidebar" id="toggle-sidebar">
<i class="bi bi-list fs-5"></i>
</button>
<button class="btn btn-outline-info btn-sm me-3 pin-sidebar" id="pin-sidebar">
<i class="bi bi-list fs-5"></i>
</button>
</div>
<!-- Toggle buttons end -->
<!-- App brand sm for small screens start -->
<div class="app-brand-sm">
<a href="index.html" class="d-lg-none d-md-block">
<img src="assets/images/logo-sm.svg" class="logo" alt="Bootstrap Gallery">
</a>
</div>
<!-- App brand sm for small screens end -->
<!-- App header actions start -->
<div class="header-actions">
</div>
<!-- App header actions end -->
</div>
<!-- App header ends -->
<!-- App hero header starts -->
<div class="app-hero-header d-flex align-items-start">
<!-- Breadcrumb start -->
<ol class="breadcrumb d-none d-lg-flex">
<li class="breadcrumb-item">
<i class="bi bi-house lh-1"></i>
<a href="index.html" class="text-decoration-none">Home</a>
</li>
<li class="breadcrumb-item">Components</li>
<li class="breadcrumb-item" aria-current="page">Accordions</li>
</ol>
<!-- Breadcrumb end -->
<!-- Filter start -->
<div class="ms-auto d-flex flex-row gap-1 day-filters">
</div>
<!-- Filter end -->
</div>
<!-- App Hero header ends -->
<!-- App body starts -->
<div class="app-body">
</div>
<!-- App body ends -->
<!-- App footer start -->
<div class="app-footer">
<span>© Bootstrap Gallery 2024</span>
</div>
<!-- App footer end -->
</div>
<!-- App container ends -->
</div>
<!-- Main container end -->
</div>
<!-- Page wrapper end -->
<!-- *************
************ JavaScript Files *************
************* -->
<!-- Required jQuery first, then Bootstrap Bundle JS -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<!-- *************
************ Vendor Js Files *************
************* -->
<!-- Overlay Scroll JS -->
<script src="assets/vendor/overlay-scroll/jquery.overlayScrollbars.min.js"></script>
<script src="assets/vendor/overlay-scroll/custom-scrollbar.js"></script>
<!-- Custom JS files -->
<script src="assets/js/custom.js"></script>
</body>
</html>
Note:
- All common css files are included in assets/css folder.
- All plugin css files are included in assets/vendor folder.
<!-- *************
************ Common Css Files *************
************ -->
<link rel="stylesheet" href="assets/fonts/bootstrap/bootstrap-icons.css" />
<link rel="stylesheet" href="assets/css/main.min.css" />
<link rel="stylesheet" href="assets/vendor/overlay-scroll/OverlayScrollbars.min.css" />
<!-- Calendar CSS -->
<link rel="stylesheet" href="assets/vendor/calendar/css/main.min.css" />
<link rel="stylesheet" href="assets/vendor/calendar/css/custom.css" />
<!-- Date Range CSS -->
<link rel="stylesheet" href="assets/vendor/daterange/daterange.css" />
<!-- Data Tables -->
<link rel="stylesheet" href="assets/vendor/datatables/dataTables.bs5.css" />
<link rel="stylesheet" href="assets/vendor/datatables/dataTables.bs5-custom.css" />
<link rel="stylesheet" href="assets/vendor/datatables/buttons/dataTables.bs5-custom.css" />
Note:
- Main scss file is included in assets/css folder.
SCSS Files --
Multiple options to compile the SCSS files.
Option 1. Compile SCSS files in Visual Studio Code -
Install the SCSS Extension.
Go to the Live Sass Compiler Extension page and hit the large green install button. ...
Open Your SCSS File.
Click on the “Watch Sass” Button in footer.
Complie will start.
Option 2. Compile SCSS files using Terminal -
Go to folder.
Run the command ' sass --watch input.scss output.css '
sass --watch input-filename.scss output-filename.css
Note:
- All image placeholders are included in images folder.
- Country Flags SVG images are included in flags folder.
- Images which are used in the live demo are not included in the download folder.
- Please replace the images as per your requirement.
Note:
- Font icons files are included in fonts folder.Note:
- All common js files are included in js folder.
- All plugins js files are included in vendor folder.
<!-- *************
************ Required JavaScript Files *************
************* -->
<!-- Required jQuery first, then Bootstrap Bundle JS -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<!-- *************
************ Vendor Js Files *************
************* -->
<!-- Overlay Scroll JS -->
<script src="assets/vendor/overlay-scroll/jquery.overlayScrollbars.min.js"></script>
<script src="assets/vendor/overlay-scroll/custom-scrollbar.js"></script>
<!-- Apex Charts -->
<script src="assets/vendor/apex/apexcharts.min.js"></script>
<script src="assets/vendor/apex/custom/graphs/area.js"></script>
<script src="assets/vendor/apex/custom/graphs/line.js"></script>
<script src="assets/vendor/apex/custom/graphs/bar.js"></script>
<script src="assets/vendor/apex/custom/graphs/column-area.js"></script>
<script src="assets/vendor/apex/custom/graphs/candlestick.js"></script>
<script src="assets/vendor/apex/custom/graphs/heatmap.js"></script>
<script src="assets/vendor/apex/custom/graphs/donut.js"></script>
<script src="assets/vendor/apex/custom/graphs/pie.js"></script>
<!-- Calendar JS -->
<script src="assets/vendor/calendar/js/main.min.js"></script>
<script src="assets/vendor/calendar/custom/daygrid-calendar.js"></script>
<!-- Date Range JS -->
<script src="assets/vendor/daterange/daterange.js"></script>
<script src="assets/vendor/daterange/custom-daterange.js"></script>
<!-- Vector Maps -->
<script src="assets/vendor/jvectormap/jquery-jvectormap-2.0.5.min.js"></script>
<script src="assets/vendor/jvectormap/world-mill-en.js"></script>
<script src="assets/vendor/jvectormap/gdp-data.js"></script>
<script src="assets/vendor/jvectormap/us_aea.js"></script>
<script src="assets/vendor/jvectormap/usa.js"></script>
<script src="assets/vendor/jvectormap/continents-mill.js"></script>
<script src="assets/vendor/jvectormap/custom/world-map-markers2.js"></script>
<script src="assets/vendor/jvectormap/custom/map-usa.js"></script>
<script src="assets/vendor/jvectormap/custom/map-usa2.js"></script>
<!-- Morris Graphs -->
<script src="assets/vendor/morris/raphael-min.js"></script>
<script src="assets/vendor/morris/morris.min.js"></script>
<script src="assets/vendor/morris/custom/area.js"></script>
<script src="assets/vendor/morris/custom/barColors.js"></script>
<script src="assets/vendor/morris/custom/dayData.js"></script>
<script src="assets/vendor/morris/custom/donutColors.js"></script>
<script src="assets/vendor/morris/custom/donutFormatter.js"></script>
<script src="assets/vendor/morris/custom/morrisBar.js"></script>
<script src="assets/vendor/morris/custom/negativeValues.js"></script>
<script src="assets/vendor/morris/custom/stackedBar.js"></script>
<!-- Custom JS files -->
<script src="assets/js/custom.js"></script>
JavaScript Libraries
---------------------
--------------------
-------------------
------------------
Bootstrap 4
https://getbootstrap.com/
jQuery
http://www.jquery.com
JavaScript Plugins
---------------------
--------------------
-------------------
------------------
Apex Graphs
https://apexcharts.com/
DataTables
http://datatables.net/
Daterange Picker
http://www.daterangepicker.com/
FullCalendar
https://fullcalendar.io/
jVector Maps
http://jvectormap.com
Moment
http://momentjs.com/
Morris
https://morrisjs.github.io/morris.js/
CSS Files
---------------------
--------------------
-------------------
------------------
Bootstrap
http://getbootstrap.com
Circliful
https://github.com/pguso/jquery-plugin-circliful
Calendar
https://plugins.jquery.com/fullcalendar
Data Tables
https://datatables.net
jQuery UI
https://jqueryui.com
Images
---------------------
--------------------
-------------------
------------------
Unsplash
http://unsplash.com
Pexels
https://pexels.com
Pixabay
http://pixabay.com
Fonts
---------------------
--------------------
-------------------
------------------
Icon Font
https://fonts.google.com/