#1
Creative & Multipurpose Admin HTML Template
Let's get started with AdminUX
AdminUX is creative and multipurpose template. You can use it for CRM, Business application, Intranet Application, Portal service and Many more. It comes with unlimited possibilities and 10+ predefined styles which you can also mix up and create new style. Do support and spread a word for us.
Template build with Bootstrap version 5.2.0 HTML CSS JS framework. We provide wide range of customized, unique creative and flexible components. We also growing component library with widgets and other third party customizations. We also targeted to create different types of demo pages for our customer so they can easily get ready html pages code that can be satisfy requirements.
Here, Guidelines provided is for understanding of basic structure framework and about template. We have mentioned all the criteria which are unique and for easy to understand. For the third parties we recommend to visit official documents for complete guidelines about third parties. We have used Visual Studio Code as editor during this documentation and code writing. To compile scss you can use live Sass Compiler for Visual Studio Code extension, its very easy and light weight for scss compilation on realtime auto reload "live server" extension for HTML.
We also created color schemes with different classes, you can switch other style by using different class name like theme-yellow, theme-red, theme-purple and create your own by changing variables color codes in _variable.scss for dark mode _darkmode.scss.
Hope this will bring new horizon and new fresh ideas for trending Fluent design concept. Please do support us and spread a word about us, this will help us to create more beautiful and useful interfaces designs.
Clean and Creative design and pleasant colors scheme to improve productivity and improve application usage for business, application, network and to communicate with real-world's humans.
#
Folder Structure
Folder structure and files guidance for our downloaded files.
Clean code requires clean arrangement of folders which helps files to remain organized.
We have main folder assets and inside all the other files organized by its type to maintain HTML pages separate from other files. At the first look all other folders are inside assets folder like css, js, vendors etc. Nested structure are as below and here we have described each folder with its purpose and use.
:HTML
-- assets
---- css
---- img
---- js
---- scss
---- vendor
------ bootstrap-5
------ chart-js-3.3.1
------ chosen_v1.8.7
------ Circle-pack
------ ckeditor5
------ daterangepicker
------ dragula
------ dropzpone5-9-3
------ fooTable
------ fullCalendar
------ highlight
------ jqvMap
------ nouislider
------ Product-tour
------ progressbar-js
------ simplelightbox
------ smartWizard
------ swiperjs-7.3.1
------ tagsinput
------ typeheadjs
-- .html all other pagesHTML
HTML folder have all the HTML files which you have seen in preview and dependent files with organized folder structure.
-
assets
All the files required in HTML like css, js, images etc. are kept inside assets folder
- css:
Our main css will be converted/compiled in scss folder but if you wanted to add any other custom CSS, developer css etc. you can use this folder to keep it separate from all template codes. - img:
Images required to add are to be kept in img folder whether its jpg or png. We have kept other logo and icons files in img folder. - js:
Script files to run framework apart from third parties are kept inside this js folder. you can find app.js and main.js in this t change events and page level event by jquery. - scss:
All basic scss files are kept inside this folder with the variables color codes files.We have kept all variable as simpler as it can be to understand by any of developers and designer. We thought to target each customer and kept in mind a different level of knowledge. If you wanted to change any of the style colors you can edittheme-yellow,theme-red,theme-purpleand create your own by changing variables color codes in_variable.scssfor dark mode_darkmode.scss. - vendor:
All the third parties are available here in this folder. We have named such third party used in this template to give idea here how to place and organize third party when working with this template. This thing is recommended not mandatory, you can create your own folder also.
- css:
-
HTML pages
All other html pages rest inside the HTML folder with assets folder parallel.
#
Colors scheme
Change the theme based on your branding
Your brand color and branding is your identity. Sometime being off-bit and clean also a good choice.
We have different set of predefined style with relative backgrounds and you can pick one of it by changing just class name like theme-yellow, theme-red, theme-purple and create your own by changing variables color codes in _variable.scss for dark mode _darkmode.scss.
We have 10 predefined color schemes as below:
theme-bluetheme-indigotheme-purpletheme-pinktheme-redtheme-orangetheme-yellowtheme-greentheme-tealtheme-cyan
All comes with dark mode.
Here all the preview of personalization page you can just pick style and check preview of pages, elements and components.
Wanted to change colors in themes style:
.theme-blue {
/* color schemes */
--AdminUX-theme: #015EC2;
--AdminUX-theme-rgb: 1, 94, 194;
--AdminUX-theme-darken: #003f83;
/* gradient bg colors */
--AdminUX-theme-grad-1: #00c5dd;
--AdminUX-theme-grad-2: #2253c3;
--AdminUX-theme-grad-3: #dce4f7;
/* gradient text colors */
--AdminUX-theme-text-grad-1: #dd0093;
--AdminUX-theme-text-grad-2: #3f22c3;
}All other background and text color remain in :root{ } for light mode in _variable.scss or darkmode root color will be in _darkmode.scss under .darkmode{}. Those will be default as standard so we are not recommend to fully modify all it may reflect global level. If you do so, please review all the components carefully. You can default add dark mode by adding class dark-mode on <html> tag
Notes:
When you are applying only one theme-class and wanted to run or apply that only, No other themes or theme class applied dynamically on <body> tag, Remove <script src="assets/js/color-scheme.js"></script> as that will no longer required as it manages cookie class for HTML template previews. For the development theme-styleName can be applied dynamically on <body> tag as user choice based development.
#
Scripts Files & Codes
All the programmatic things needs to be coded.
Templates, Frameworks and Third Parties are main division for our script part.
We have main folder assets and inside all the other files organized by its type to maintain HTML pages separate from other files. At the first look all other folders are inside assets folder like css, js, vendors etc. Nested structure are as below and here we have described each folder with its purpose and use.
Default set of scripts:
All the framework, jquery and dependent scripts should be link first like as we have shown in below code. To fresh start you can use blank.html page also. Here we have added jquery, bootstrap and popper js which is required by bootstrap framework.
<!-- Required jquery and libraries -->
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/vendor/bootstrap-5/dist/js/bootstrap.bundle.js"></script>Templates scripts:
Templates structure, elements, menu and view sizes are required at global level which will be needed for all pages and contents. We have grouped these type of scripts as template scripts. Here main js is templates specific while other colors-scheme js is. For the development theme-styleName can be applied dynamically on <body> tag as user choice based development.
<!-- Customized jquery file -->
<script src="assets/js/main.js"></script>
<script src="assets/js/color-scheme.js"></script>Third parties scripts:
We have added third party's scripts with comment line you can add as many as per your requirement. Whichever is not required, you can remove it. Just check if any of page level script code or file doesn't have any dependencies. You you remove script files related function from page level code should be removed. Also we have used most of the third parties with MIT licenses but we also recommend to check license and usage from particular third party websites and refer related documents to update function's options.
<!-- date range picker -->
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="assets/vendor/daterangepicker/daterangepicker.js"></script>
<!-- chosen script -->
<script src="assets/vendor/chosen_v1.8.7/chosen.jquery.min.js"></script>
<!-- Chart js script -->
<script src="assets/vendor/chart-js-3.3.1/chart.min.js"></script>
<!-- Progress circle js script -->
<script src="assets/vendor/progressbar-js/progressbar.min.js"></script>
<!-- swiper js script -->
<script src="assets/vendor/swiper-7.3.1/swiper-bundle.min.js"></script>Page level & on-page set of scripts:
Page level components specific or any third party functions are all placed in page level section. If its small script its placed directly in page else it will be in js file separately created to arrange code well.
<!-- page level script here -->
<script src="assets/js/header-title.js"></script>
<script src="assets/js/project-projects.js"></script>You can edit and update page level js and codes as per your requirement and options provided by third parties in case of any third party used.
#
Page HTML Structure
It's very important part to understand page level structure while UI integration in further development.
In generically we have header footer, footer company, main content and side menu as main division of page structure.
Additionally we have modal boxes and chat window, chat list, notification list as out side of main content in parallel of sidebar structure to give access it globally from header. The html, head tag and body tags structure remain as main page layout. Inside body there are multiple section divided for header, footer, sidebar, chat list, notification list, chat boxes etc. those can be separate views. Main tag is routing content part.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="description" content="">
<meta name="author" content="">
<meta name="generator" content="">
<title>AdminUX - Admin, Dashboard, Web Application HTML template, UI kit, UI templates</title>
<!-- manifest meta -->
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="manifest" href="manifest.json" />
<!-- Favicons -->
<link rel="apple-touch-icon" href="assets/img/favicon180.png" sizes="180x180">
<link rel="icon" href="assets/img/favicon32.png" sizes="32x32" type="image/png">
<link rel="icon" href="assets/img/favicon16.png" sizes="16x16" type="image/png">
<!-- Google fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- bootstrap icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<!-- chosen css -->
<link rel="stylesheet" href="assets/vendor/chosen_v1.8.7/chosen.min.css">
<!-- date range picker -->
<link rel="stylesheet" href="assets/vendor/daterangepicker/daterangepicker.css">
<!-- swiper carousel css -->
<link rel="stylesheet" href="assets/vendor/swiper-7.3.1/swiper-bundle.min.css">
<!-- style css for this template -->
<link href="assets/scss/style.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100 sidebar-pushcontent " data-sidebarstyle="sidebar-pushcontent">
<!-- sidebar-pushcontent, sidebar-overlay , sidebar-fullscreen are classes to switch UI here-->
<!-- page loader -->
<div class="container-fluid h-100 position-fixed loader-wrap bg-blur">
<div class="row justify-content-center h-100">
<div class="col-auto align-self-center text-center px-5 leaf">
<h2 class="mb-1">Admin<b class="fw-bold">UX</b></h2>
<h6 class="mb-4 text-secondary">Mobile Dashboard UI UX</h6>
<div class="logo-square animated mb-4">
<div class="icon-logo">
<img src="assets/img/logo-icon.png" alt="" />
</div>
</div>
<p class="text-secondary small">Petal of flower being ready to <span class="text-gradient">blossom</span></p>
<div class="dotslaoder">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<br>
</div>
</div>
</div>
<!-- page loader ends -->
<!-- Header -->
<header class="header">
<!-- Fixed navbar -->
<nav class="navbar fixed-top">
<div class="container-fluid">
<button class="btn btn-link btn-square menu-btn me-2" type="button">
<i class="bi bi-list fs-4"></i>
</button>
<div class="header-title align-self-center">
<h5 class="mb-0">Blank</h5>
<p class="text-secondary small">Label</p>
</div>
<div class="ms-auto">
<div class="row">
<div class="col-auto">
<button class="btn btn-square btn-link search-btn d-inline-block d-xl-none " id="searchtoggle">
<i class="bi bi-search"></i>
</button>
<button type="button" class="btn btn-square btn-link text-center" id="addtohome" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Install PWA"><i class="bi bi-cloud-download"></i></button>
<button type="button" class="btn btn-square btn-link text-center d-none d-lg-inline-block" id="gofullscreen" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Fullscreen"><i class="bi bi-fullscreen"></i></button>
<button type="button" class="btn btn-square btn-link text-center d-none d-sm-inline-block" id="showChat" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Chat & Support">
<span class="bi bi-chat-right-dots position-relative">
<span class="badge position-absolute top-0 start-100 translate-middle bg-theme textw-white rounded">
<span class="fs-10">9+</span> <span class="visually-hidden">New alerts</span>
</span>
</span>
</button>
<button type="button" class="btn btn-square btn-link text-center" id="showNotification" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Notifications">
<span class="bi bi-bell position-relative">
<span class="position-absolute top-0 start-100 p-1 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</span>
</button>
</div>
<div class="col-auto align-self-center">
<div class="dropdown">
<a class="dd-arrow-none dropdown-toggle" id="userprofiledd" data-bs-toggle="dropdown" aria-expanded="false" role="button">
<div class="row">
<div class="col-auto align-self-center">
<figure class="avatar avatar-30 rounded-circle coverimg vm">
<img src="assets/img/user-1.jpg" alt="" id="userphotoonboarding2" />
</figure>
</div>
<div class="col ps-0 align-self-center d-none d-lg-block">
<p class="mb-0">
<span class="text-dark username">Maxartkiller</span><br>
<small class="small">United States</small>
</p>
</div>
<div class="col ps-0 align-self-center d-none d-lg-block">
<i class="bi bi-chevron-down small vm"></i>
</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end w-300" aria-labelledby="userprofiledd">
<div class="dropdown-info bg-radial-gradient-theme">
<div class="row">
<div class="col-auto">
<figure class="avatar avatar-50 rounded-circle coverimg vm">
<img src="assets/img/user-1.jpg" alt="" id="userphotoonboarding3" />
</figure>
</div>
<div class="col align-self-center ps-0">
<h6 class="mb-0"><span class="username">Maxartkiller</span></h6>
<p class="text-muted small">Balance: $100.00</p>
</div>
</div>
</div>
<div><a class="dropdown-item" href="profile.html">My Profile</a></div>
<div>
<a class="dropdown-item" href="index.html">
<div class="row g-0">
<div class="col align-self-center">My Dashboard</div>
<div class="col-auto">
<figure class="avatar avatar-20 coverimg rounded-circle">
<img src="assets/img/user-2.jpg" alt="" />
</figure>
<figure class="avatar avatar-20 coverimg rounded-circle">
<img src="assets/img/user-3.jpg" alt="" />
</figure>
<figure class="avatar avatar-20 coverimg rounded-circle">
<img src="assets/img/user-4.jpg" alt="" />
</figure>
<div class="avatar avatar-20 bg-theme rounded-circle">
<small class="fs-10 vm">9+</small>
</div>
</div>
</div>
</a>
</div>
<div class="dropdown open-left dropdown-dontclose">
<a class="dropdown-item" data-bs-toggle="dropdown" aria-expanded="false" role="button">
<div class="row">
<div class="col">Subscription</div>
<div class="col-auto pe-0">
<p class="small text-success">Upgrade</p>
</div>
<div class="col-auto ps-0"><span class="arrow bi bi-chevron-right"></span></div>
</div>
</a>
<div class="dropdown-menu">
<div><a class="dropdown-item" href="subscription.html">Plan</a></div>
<div><a class="dropdown-item" href="your-earning.html">Earning</a></div>
<div><a class="dropdown-item" href="your-payment.html">Payment</a></div>
<div><a class="dropdown-item" href="your-statement.html">Statement</a></div>
</div>
</div>
<div class="dropdown open-left dropdown-dontclose">
<a class="dropdown-item" data-bs-toggle="dropdown" aria-expanded="false" role="button">
<div class="row">
<div class="col">Language</div>
<div class="col-auto pe-0"><small class="vm">EN - English</small> <i class="bi bi-translate"></i></div>
<div class="col-auto ps-0"><span class="arrow bi bi-chevron-right"></span></div>
</div>
</a>
<div class="dropdown-menu">
<div><a class="dropdown-item active" data-value="EN">EN - English</a></div>
<div><a class="dropdown-item" data-value="FR">FR - French</a></div>
<div><a class="dropdown-item" data-value="CH">CH - Chinese</a></div>
<div><a class="dropdown-item" data-value="HI">HI - Hindi</a></div>
</div>
</div>
<div><a class="dropdown-item" href="your-settings.html">Account Setting</a></div>
<div><a class="dropdown-item" href="login.html">Logout</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<!-- Header ends -->
<!-- Sidebar -->
<div class="sidebar-wrap">
<div class="sidebar">
<div class="container">
<div class="row mb-4">
<div class="col align-self-center">
<h6>Main navigation</h6>
</div>
<div class="col-auto">
<a class="" data-bs-toggle="collapse" data-bs-target="#usersidebarprofile" aria-expanded="false" role="button" aria-controls="usersidebarprofile">
<i class="bi bi-person-circle"></i>
</a>
</div>
</div>
<!-- user information -->
<div class="row text-center collapse " id="usersidebarprofile">
<div class="col-12">
<div class="avatar avatar-100 rounded-circle shadow-sm mb-3 bg-white">
<figure class="avatar avatar-90 rounded-circle coverimg">
<img src="assets/img/user-1.jpg" alt="" id="userphotoonboarding">
</figure>
</div>
</div>
<div class="col-12 mb-4">
<h6 class="mb-1" id="usernamedisplay">The Maxartkiller</h6>
<p class="text-secondary small">United States</p>
</div>
</div>
<!-- user menu navigation -->
<div class="row mb-4">
<div class="col-12 px-0">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="home.html">
<div class="avatar avatar-40 icon"><i class="bi bi-house-door"></i></div>
<div class="col">Home</div>
<div class="arrow"><i class="bi bi-chevron-right"></i></div>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="false" data-bs-display="static" href="#" role="button" aria-expanded="false">
<div class="avatar avatar-40 icon"><i class="bi bi-coin"></i></div>
<div class="col">Finance</div>
<div class="arrow"><i class="bi bi-chevron-down plus"></i> <i class="bi bi-chevron-up minus"></i>
</div>
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item nav-link" href="finance-dashboard.html">
<div class="avatar avatar-40 icon"><i class="bi bi-speedometer2"></i>
</div>
<div class="col align-self-center">Finance Dashboard</div>
<div class="arrow"><i class="bi bi-chevron-right"></i></div>
</a>
</li>
<li>
<a class="dropdown-item nav-link" href="finance-crypto.html">
<div class="avatar avatar-40 icon"><i class="bi bi-currency-bitcoin"></i>
</div>
<div class="col align-self-center">Crypto</div>
<div class="arrow"><i class="bi bi-chevron-right"></i></div>
</a>
</li>
<li>
<a class="dropdown-item nav-link" href="finance-banks.html">
<div class="avatar avatar-40 icon"><i class="bi bi-bank"></i>
</div>
<div class="col align-self-center">Banks</div>
<div class="arrow"><i class="bi bi-chevron-right"></i></div>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Sidebar ends -->
<!-- Begin page content -->
<main class="main mainheight">
<div class="container-fluid mb-4">
<div class="row align-items-center page-title">
<div class="col col-sm-auto">
<div class="input-group input-group-md">
<input type="text" class="form-control bg-none px-0" value="" id="titlecalendar" />
<span class="input-group-text text-secondary bg-none" id="titlecalandershow"><i class="bi bi-calendar-event"></i></span>
</div>
</div>
<div class="col-auto ms-auto ps-0">
<a href="help-center.html" class="btn btn-link btn-square text-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Support">
<i class="bi bi-life-preserver"></i>
</a>
<a href="personalization.html" class="btn btn-link btn-square text-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Personalize">
<i class="bi bi-palette"></i>
</a>
<a href="../app-pricing.html" class="btn btn-link btn-square text-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Buy this">
<span class="bi bi-basket position-relative">
<span class="position-absolute top-0 start-100 p-1 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</span>
</a>
</div>
</div>
</div>
<div class="container">
<h1>Blank page</h1>
<p class="lead">Start from here</p>
<p>Is always be great. Add custom page level js at bottom. Here header-title.js added to all dashboard pages where page header and titles added</p>
</div>
<!-- Footer -->
<div class="container-fluid mb-4">
</div>
</main>
<!-- footer -->
<footer class="footer text-white">
<div class="container-fluid text-center">
<p class="text-secondary small">Copyright @2022, Designed by <a href="https://maxartkiller.com" target="_blank">Maxartkiller</a> on Earth ❤️</p>
<ul class="nav justify-content-center small">
<li class="nav-item"><a class="nav-link" href="help-center.html">Help</a></li>
<li class="nav-item">|</li>
<li class="nav-item"><a class="nav-link" href="terms-of-use.html">Terms of Use</a></li>
<li class="nav-item">|</li>
<li class="nav-item"><a class="nav-link" href="privacy-policy.html">Privacy Policy</a></li>
</ul>
</div>
</footer>
<!-- footer ends -->
<!-- footer sticky bottom -->
<footer class="footer-sticky">
<div class="container">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link" href="home.html">
<span>
<i class="nav-icon bi bi-house"></i>
<span class="nav-text">Home</span>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="finance-dashboard.html">
<span>
<i class="nav-icon bi bi-binoculars"></i>
<span class="nav-text">Money</span>
</span>
</a>
</li>
<li class="nav-item centerbutton">
<a class="nav-link" href="personalization.html">
<span class="bg-radial-gradient-theme">
<i class="bi bi-palette size-22"></i>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="app-email.html">
<span>
<i class="nav-icon bi bi-bag"></i>
<span class="nav-text">Email</span>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="profile.html">
<span>
<i class="nav-icon bi bi-person"></i>
<span class="nav-text">Profile</span>
</span>
</a>
</li>
</ul>
</div>
</footer>
<!-- footer sticky bottom ends -->
<!-- Rightbar -->
<div class="rightbar-wrap">
<div class="rightbar">
<!-- chat window -->
<div class="chatwindow d-none" id="chatwindow">
<div class="card border-0 h-100">
<div class="input-group input-group-md">
<span class="input-group-text text-theme"><i class="bi bi-person-plus"></i></span>
<input type="text" class="form-control" placeholder="Start searching... " value="" />
<div class="dropdown input-group-text rounded px-0">
<button class="btn btn-sm btn-link dd-arrow-none" type="button" id="statuschat" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
<i class="bi bi-three-dots-vertical"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="statuschat">
<li><a class="dropdown-item" href="javascript:void(0)"><span class="vm me-1 bg-success rounded-circle d-inline-block p-1"></span> Online</a></li>
<li><a class="dropdown-item" href="javascript:void(0)"><span class="vm me-1 bg-warning rounded-circle d-inline-block p-1"></span> Away</a></li>
<li><a class="dropdown-item" href="javascript:void(0)"><span class="vm me-1 bg-danger rounded-circle d-inline-block p-1"></span> Offline</a></li>
<li><a class="dropdown-item" href="javascript:void(0)"><span class="vm me-1 bg-secondary rounded-circle d-inline-block p-1"></span> Disabled</a></li>
</ul>
</div>
</div>
<div class="card-header">
<div class="row">
<div class="col d-grid">
<button class="btn btn-outline-secondary border" type="button"><i class="bi bi-camera-video me-2"></i> Meet</button>
</div>
<div class="col d-grid">
<button class="btn btn-outline-secondary border" type="button"><i class="bi bi-chat-right-text me-2"></i> Chat</button>
</div>
</div>
</div>
<div class="card-body h-100 overflow-y-auto p-0">
<ul class="list-group list-group-flush bg-none rounded-0 ">
<li class="list-group-item">
<div class="row">
<div class="col-auto">
<figure class="avatar avatar-44 coverimg rounded-circle">
<img src="assets/img/user-2.jpg" alt="" />
</figure>
</div>
<div class="col-9 align-self-center ps-0">
<div class="row g-0">
<div class="col-8">
<p class="text-truncate mb-0">Angelina Devid</p>
</div>
<div class="col-4 text-end"><small class="text-muted fs-10 mb-1"><i class="bi bi-check"></i> 2:00 am</small></div>
</div>
<p class="text-secondary small text-truncate">Spread love and spread this template</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- chat window ends -->
<!-- notifications window -->
<div class="notificationwindow d-none h-100 overflow-y-auto" id="notificationwindow">
<div class="card border-0 mb-2">
<div class="input-group input-group-md">
<span class="input-group-text text-theme"><i class="bi bi-calendar-event"></i></span>
<input type="text" class="form-control" value="" id="notificationdaterange" />
</div>
<div class="card-body p-0 calendarwindow" id="calendardisplay">
</div>
</div>
</div>
<!-- notifications window ends -->
</div>
</div>
<!-- Rightbar ends -->
<!-- chat window -->
<div class="chatboxes w-auto align-right mb-2">
<!-- dropdown for each user -->
<div class="dropstart">
<div class="dd-arrow-none dropdown-toggle" id="thefirstchat" data-bs-display="static" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" role="button">
<span class="position-absolute top-0 start-100 p-1 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
<figure class="avatar avatar-40 coverimg rounded-circle shadow">
<img src="assets/img/user-2.jpg" alt="">
</figure>
</div>
<div class="dropdown-menu dropdown-menu-middle w-300 mb-2 p-0">
<!-- chat box here -->
</div>
<button class="chat-close btn btn-danger text-white"><i class="bi bi-x"></i></button>
</div>
<!-- dropdown for each user -->
<div class="dropstart">
<div class="dd-arrow-none dropdown-toggle" data-bs-display="static" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" role="button">
<span class="position-absolute top-0 start-100 translate-middle p-1 bg-success border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
<figure class="avatar avatar-40 coverimg rounded-circle shadow">
<img src="assets/img/user-4.jpg" alt="">
</figure>
</div>
<div class="dropdown-menu dropdown-menu-middle w-300 mb-2 p-0">
</div>
<button class="chat-close btn btn-danger text-white"><i class="bi bi-x"></i></button>
</div>
</div>
<!-- dropdown for support -->
<div class="chatboxes w-auto align-right bottom-0 mb-2">
<!-- dropdown for support -->
<div class="dropup">
<div class="dd-arrow-none dropdown-toggle" data-bs-display="static" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" id="supportdd" role="button">
<span class="position-absolute top-0 start-100 translate-middle p-1 bg-success border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
<figure class="avatar avatar-40 coverimg rounded-circle shadow bg-primary">
<img src="assets/img/favicon72.png" alt="">
</figure>
</div>
<div class="dropdown-menu dropdown-menu-end w-300 p-0">
<!-- chat box here -->
</div>
<button class="chat-close btn btn-danger text-white"><i class="bi bi-x"></i></button>
</div>
</div>
<!-- chat window ends -->
<!-- Required jquery and libraries -->
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/vendor/bootstrap-5/dist/js/bootstrap.bundle.js"></script>
<!-- Customized jquery file -->
<script src="assets/js/main.js"></script>
<script src="assets/js/color-scheme.js"></script>
<!-- PWA app service registration and works -->
<script src="assets/js/pwa-services.js"></script>
<!-- date range picker -->
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="assets/vendor/daterangepicker/daterangepicker.js"></script>
<!-- chosen script -->
<script src="assets/vendor/chosen_v1.8.7/chosen.jquery.min.js"></script>
<!-- Chart js script -->
<script src="assets/vendor/chart-js-3.3.1/chart.min.js"></script>
<!-- Progress circle js script -->
<script src="assets/vendor/progressbar-js/progressbar.min.js"></script>
<!-- swiper js script -->
<script src="assets/vendor/swiper-7.3.1/swiper-bundle.min.js"></script>
<!-- page level script here -->
<script src="assets/js/header-title.js"></script>
</body>
</html>In page structure where... the pages codes are switched is inside the element main <!-- Begin page content --> and the next line is <main class="main mainheight">. You can create routing inside main tag elements for dynamic age namings and configure page level details.
#
Icons recommendations
As technologies grows icons become more space saving visual labeling
Templates preview and pages uses Bootstrap icons v1.8.1.
We all know icons becomes more space saving and visual indication for the many of device centric design. User day by day becomes more and more self learner. So icons we use should be more realistic to the topics we are representing. If you use more relevant icon, use will understand it just by visuals no need to read its label. Here for wide range of audience we recommend to icons and label also. You can use of refer any of the library for web fonts and add it in place of bootstrap icons. Read all icons label/cheetsheet for available icons at Bootstrap icons.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">Icons usage, Below code will represent icon as : :
<i class"bi bi-house-door"><i>Notes:
We recommend not to use multiple web fonts as it also increase load time and may impact on Performance. For few unique icons you can create svg and add into project but do not use multiple types font icons library.
#
Thank You
We loved to see you here!
AdminUX UI UX HTML templates will grow with your support
If you have any query or questions regarding this template or need help, you can always reach us at info@maxartkiller.com. We will try our best to solve your problem and support you. You connect with us on our social media accounts to stay tuned with us.
We thank for all images used to Pixabay.com. Movie, Brand Logo, Currency Logo or Products images are just for demo purpose nothing will be booked or purchase from this website, application, dashboard demo.