Commit 4c981655 authored by Santhanavanich's avatar Santhanavanich
Browse files

update

parent d91dc71e
Pipeline #6783 passed with stage
in 9 seconds
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Accordion</h3>
<p class="text-subtitle text-muted">A pretty helpful component to show organized information to the user</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Accordion</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="row">
<div class="col-12 col-md-6">
<div class="card">
<div class="card-header">
<h4>Default</h4>
</div>
<div class="card-body">
<p>Click the accordions below to expand/collapse the accordion content.</p>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card">
<div class="card-header">
<h4>Flush</h4>
</div>
<div class="card-body">
<p>Add <code>.accordion-flush</code> to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.</p>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item active">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Alert</h3>
<p class="text-subtitle text-muted">A pretty helpful component to show emphasized information to the user</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Alert</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="row">
<div class="col-12 col-md-6">
<div class="card">
<div class="card-header">
<h4>Default</h4>
</div>
<div class="card-body">
<div class="alert alert-primary">This is primary alert.</div>
<div class="alert alert-success">This is success alert.</div>
<div class="alert alert-warning">This is warning alert.</div>
<div class="alert alert-danger">This is danger alert.</div>
<div class="alert alert-dark">This is dark alert.</div>
<div class="alert alert-secondary">This is secondary alert.</div>
<div class="alert alert-light">This is light alert.</div>
<div class="alert alert-info">This is info alert.</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>With Icon</h4>
</div>
<div class="card-body">
<div class="alert alert-primary"><i class="bi bi-star"></i> This is primary alert.</div>
<div class="alert alert-success"><i class="bi bi-check-circle"></i> This is success alert.</div>
<div class="alert alert-warning"><i class="bi bi-exclamation-triangle"></i> This is warning
alert.</div>
<div class="alert alert-danger"><i class="bi bi-file-excel"></i> This is danger alert.</div>
<div class="alert alert-secondary"><i class="bi bi-star"></i> This is secondary alert.</div>
<div class="alert alert-info"><i class="bi bi-star"></i> This is info alert.</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Light</h4>
</div>
<div class="card-body">
<div class="alert alert-light-primary color-primary"><i class="bi bi-star"></i> This is primary
alert.</div>
<div class="alert alert-light-success color-success"><i class="bi bi-check-circle"></i> This is
success alert.</div>
<div class="alert alert-light-warning color-warning"><i class="bi bi-exclamation-triangle"></i>
This is warning alert.</div>
<div class="alert alert-light-danger color-danger"><i class="bi bi-exclamation-circle"></i> This
is danger alert.</div>
<div class="alert alert-light-secondary color-secondary"><i class="bi bi-star"></i> This is
secondary alert.</div>
<div class="alert alert-light-info color-info"><i class="bi bi-star"></i> This is info alert.
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card">
<div class="card-header">
<h4>Heading</h4>
</div>
<div class="card-body">
<div class="alert alert-primary">
<h4 class="alert-heading">Primary</h4>
<p>This is a primary alert.</p>
</div>
<div class="alert alert-secondary">
<h4 class="alert-heading">Secondary</h4>
<p>This is a secondary alert.</p>
</div>
<div class="alert alert-success">
<h4 class="alert-heading">Success</h4>
<p>This is a success alert.</p>
</div>
<div class="alert alert-danger">
<h4 class="alert-heading">Danger</h4>
<p>This is a danger alert.</p>
</div>
<div class="alert alert-warning">
<h4 class="alert-heading">Warning</h4>
<p>This is a warning alert.</p>
</div>
<div class="alert alert-info">
<h4 class="alert-heading">Info</h4>
<p>This is a info alert.</p>
</div>
<div class="alert alert-light">
<h4 class="alert-heading">Light</h4>
<p>This is a light alert.</p>
</div>
<div class="alert alert-dark">
<h4 class="alert-heading">Dark</h4>
<p>This is a dark alert.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Dismissable</h4>
</div>
<div class="card-body">
<div class="alert alert-primary alert-dismissible fade show" role="alert">
This is primary alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-secondary alert-dismissible show fade">
This is a secondary alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-success alert-dismissible show fade">
This is a success alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-danger alert-dismissible show fade">
This is a danger alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info alert-dismissible show fade">
This is a info alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-light alert-dismissible show fade">
This is a light alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-dark alert-dismissible show fade">
This is a dark alert
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Badge - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item active">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Badge</h3>
<p class="text-subtitle text-muted">Examples for badges, our small count and labeling component</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Badge</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Variation</h4>
</div>
<div class="card-body">
<div class="badges">
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-dark">Dark</span>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Light</h4>
</div>
<div class="card-body">
<div class="badges">
<span class="badge bg-light-primary">Primary</span>
<span class="badge bg-light-secondary">Secondary</span>
<span class="badge bg-light-success">Success</span>
<span class="badge bg-light-danger">Danger</span>
<span class="badge bg-light-warning">Warning</span>
<span class="badge bg-light-info">Info</span>
<span class="badge bg-light-dark">Dark</span>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Heading</h4>
</div>
<div class="card-body">
<h1>Heading 1 <span class="badge bg-secondary">New</span></h1>
<h2>Heading 2 <span class="badge bg-secondary">New</span></h2>
<h3>Heading 3 <span class="badge bg-secondary">New</span></h3>
<h4>Heading 4 <span class="badge bg-secondary">New</span></h4>
<h5>Heading 5 <span class="badge bg-secondary">New</span></h5>
<h6>Heading 6 <span class="badge bg-secondary">New</span></h6>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Button</h4>
</div>
<div class="card-body">
<div class="buttons">
<div class="section-title mt-0">Simple</div>
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-transparent">4</span>
</button>
<button type="button" class="btn btn-danger">
Notifications <span class="badge bg-transparent">4</span>
</button>
<button type="button" class="btn btn-warning">
Notifications <span class="badge bg-transparent">4</span>
</button>
<button type="button" class="btn btn-success">
Notifications <span class="badge bg-transparent">4</span>
</button>
<button type="button" class="btn btn-dark">
Notifications <span class="badge bg-transparent">4</span>
</button>
<div class="section-title">Icons</div>
<button type="button" class="btn btn-primary btn-icon icon-left">
<i class="fas fa-plane"></i> Notifications <span class="badge bg-transparent">4</span>
</button>
<button type="button" class="btn btn-danger btn-icon icon-left">
<i class="fas fa-plane"></i> Notifications <span class="badge bg-transparent">4</span>
</button>
<button type="button" class="btn btn-warning btn-icon icon-left">
<i class="fas fa-plane"></i> Notifications <span class="badge bg-transparent">4</span>
</button>
<button type="button" class="btn btn-success btn-icon icon-left">
<i class="fas fa-plane"></i> Notifications <span class="badge bg-transparent">4</span>
</button>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Link</h4>
</div>
<div class="card-body">
<div class="badges">
<a href="#" class="badge bg-primary">Primary</a>
<a href="#" class="badge bg-secondary">Secondary</a>
<a href="#" class="badge bg-success">Success</a>
<a href="#" class="badge bg-danger">Danger</a>
<a href="#" class="badge bg-warning">Warning</a>
<a href="#" class="badge bg-info">Info</a>
<a href="#" class="badge bg-light">Light</a>
<a href="#" class="badge bg-dark">Dark</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breadcrumb - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item active">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Breadcrumb</h3>
<p class="text-subtitle text-muted">Indicate the current page’s location within a navigational hierarchy
that automatically adds separators via CSS</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Breadcrumb</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="card">
<div class="card-header">
<h4 class="card-title">Default</h4>
</div>
<div class="card-body">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Position</h4>
</div>
<div class="card-body">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-center">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-right">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item active">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Button</h3>
<p class="text-subtitle text-muted">Use Bootstrap’s custom button styles for actions in forms, dialogs,
and more with support for multiple sizes, states,
and more.</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Button</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4>Basic Buttons</h4>
</div>
<div class="card-body">
<h6>Default</h6>
<p class="text-muted">Use the <code>.btn .btn-{color}</code> classes.</p>
<div class="buttons">
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-secondary">Secondary</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-light">Light</a>
<a href="#" class="btn btn-dark">Dark</a>
</div>
<hr>
<h6>Rounded</h6>
<p>Use a class <code>.rounded-pill</code> with <code>.btn</code> class to create round button.
</p>
<div class="buttons">
<a href="#" class="btn btn-primary rounded-pill">Primary</a>
<a href="#" class="btn btn-secondary rounded-pill">Secondary</a>
<a href="#" class="btn btn-info rounded-pill">Info</a>
<a href="#" class="btn btn-warning rounded-pill">Warning</a>
<a href="#" class="btn btn-danger rounded-pill">Danger</a>
<a href="#" class="btn btn-success rounded-pill">Success</a>
<a href="#" class="btn btn-light rounded-pill">Light</a>
<a href="#" class="btn btn-dark rounded-pill">Dark</a>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h4>Buttons <code>.btn-outline</code></h4>
</div>
<div class="card-body">
<p class="text-muted">Use the <code>.btn .btn-outline-{color}</code> classes.</p>
<div class="buttons">
<a href="#" class="btn btn-outline-primary">Primary</a>
<a href="#" class="btn btn-outline-secondary">Secondary</a>
<a href="#" class="btn btn-outline-info">Info</a>
<a href="#" class="btn btn-outline-warning">Warning</a>
<a href="#" class="btn btn-outline-danger">Danger</a>
<a href="#" class="btn btn-outline-success">Success</a>
<a href="#" class="btn btn-outline-light">Light</a>
<a href="#" class="btn btn-outline-dark">Dark</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Button Sizes</h4>
</div>
<div class="card-body">
<p class="text-muted">Use the <code>.btn-lg</code> or <code>.btn-sm</code> classes.</p>
<div class="buttons">
<a href="#" class="btn btn-sm btn-warning">Small</a>
<a href="#" class="btn btn-danger">Normal</a>
<a href="#" class="btn btn-lg btn-dark">Large</a>
</div>
<div class="buttons">
<a href="#" class="btn btn-sm btn-outline-primary">Small</a>
<a href="#" class="btn btn-outline-primary">Normal</a>
<a href="#" class="btn btn-lg btn-outline-primary">Large</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Button States</h4>
</div>
<div class="card-body">
<p class="text-muted">Use the <code>.disabled</code> or <code>.btn-progress</code> classes.</p>
<div class="buttons">
<a href="#" class="btn btn-primary">Normal</a>
<a href="#" class="btn disabled btn-primary">Disabled</a>
<a href="#" class="btn disabled btn-primary btn-progress">Progress</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Icon Button</h4>
</div>
<div class="card-body">
<p class="text-muted">Use the <code>.icon</code> and <code>.icon-left</code> classes.</p>
<div class="buttons">
<a href="#" class="btn icon icon-left"><i data-feather="user"></i> Default</a>
<a href="#" class="btn icon icon-left btn-primary"><i data-feather="edit"></i> Primary</a>
<a href="#" class="btn icon icon-left btn-secondary"><i data-feather="user"></i>
Secondary</a>
<a href="#" class="btn icon icon-left btn-info"><i data-feather="info"></i> Info</a>
<a href="#" class="btn icon icon-left btn-warning"><i data-feather="alert-triangle"></i>
Warning</a>
<a href="#" class="btn icon icon-left btn-danger"><i data-feather="alert-circle"></i>
Danger</a>
<a href="#" class="btn icon icon-left btn-success"><i data-feather="check-circle"></i>
Success</a>
<a href="#" class="btn icon icon-left btn-light"><i data-feather="star"></i> Light</a>
<a href="#" class="btn icon icon-left btn-dark"><i data-feather="file"></i> Dark</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Only Icon Button</h4>
</div>
<div class="card-body">
<p class="text-muted">Use the <code>.icon</code> class.</p>
<div class="buttons">
<a href="#" class="btn icon btn-primary"><i class="bi bi-pencil"></i></a>
<a href="#" class="btn icon btn-secondary"><i class="bi bi-person"></i></a>
<a href="#" class="btn icon btn-info"><i class="bi bi-info-circle"></i></a>
<a href="#" class="btn icon btn-warning"><i class="bi bi-exclamation-triangle"></i></a>
<a href="#" class="btn icon btn-danger"><i class="bi bi-x"></i></a>
<a href="#" class="btn icon btn-success"><i class="bi bi-check"></i></a>
<a href="#" class="btn icon btn-light"><i class="bi bi-star"></i></a>
<a href="#" class="btn icon btn-dark"><i class="bi bi-file"></i></a>
</div>
<p class="text-muted mt-2">Sizes.</p>
<div class="buttons">
<a href="#" class="btn icon btn-sm btn-warning"><i
class="bi bi-exclamation-triangle"></i></a>
<a href="#" class="btn icon btn-danger"><i class="bi bi-x"></i></a>
<a href="#" class="btn icon btn-lg btn-success"><i class="bi bi-check"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Button Group</h4>
</div>
<div class="card-body">
<div class="btn-group mb-3" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
<div class="btn-group mb-3" role="group" aria-label="Basic example">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
<div class="btn-group mb-3 btn-group-sm" role="group" aria-label="Basic example">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-danger">Middle</button>
<button type="button" class="btn btn-danger">Right</button>
</div>
<div class="clearfix"></div>
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
<button type="button" class="btn">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn">Right</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Vertical Variation</h4>
</div>
<div class="card-body">
<div class="btn-group-vertical" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
<button type="button" class="btn btn-secondary">Justify</button>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item active">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Card</h3>
<p class="text-subtitle text-muted">Bootstrap’s cards provide a flexible and extensible content
container with multiple variants and options.</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Card</li>
</ol>
</nav>
</div>
</div>
</div>
<!-- Basic card section start -->
<section id="content-types">
<div class="row">
<div class="col-xl-4 col-md-6 col-sm-12">
<div class="card">
<div class="card-content">
<div class="card-body">
<h4 class="card-title">Card With Header And Footer</h4>
<p class="card-text">
Gummies bonbon apple pie fruitcake icing biscuit apple pie jelly-o sweet roll. Toffee
sugar plum sugar plum jelly-o jujubes bonbon dessert carrot cake.
</p>
</div>
<img class="img-fluid w-100" src="assets/images/samples/banana.jpg" alt="Card image cap">
</div>
<div class="card-footer d-flex justify-content-between">
<span>Card Footer</span>
<button class="btn btn-light-primary">Read More</button>
</div>
</div>
<div class="card collapse-icon accordion-icon-rotate">
<div class="card-header">
<h1 class="card-title pl-1">Accordion</h1>
</div>
<div class="card-content">
<div class="card-body">
<div class="accordion" id="cardAccordion">
<div class="card">
<div class="card-header" id="headingOne" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"
role="button">
<span class="collapsed collapse-title">Accordion Item 1</span>
</div>
<div id="collapseOne" class="collapse pt-1" aria-labelledby="headingOne"
data-parent="#cardAccordion">
<div class="card-body">
Cheesecake muffin cupcake dragée lemon drops tiramisu cake gummies chocolate
cake. Marshmallow tart
croissant. Tart dessert tiramisu marzipan lollipop lemon drops.
</div>
</div>
</div>
<div class="card collapse-header">
<div class="card-header" id="headingTwo" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"
role="button">
<span class="collapsed collapse-title">Accordion Item 2</span>
</div>
<div id="collapseTwo" class="collapse pt-1" aria-labelledby="headingTwo"
data-parent="#cardAccordion">
<div class="card-body">
Pastry pudding cookie toffee bonbon jujubes jujubes powder topping. Jelly
beans
gummi bears sweet
roll bonbon muffin liquorice. Wafer lollipop sesame snaps.
</div>
</div>
</div>
<div class="card open">
<div class="card-header" id="headingThree" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="true"
aria-controls="collapseThree" role="button">
<span class="collapsed collapse-title">Accordion Item 3</span>
</div>
<div id="collapseThree" class="collapse show pt-1" aria-labelledby="headingThree"
data-parent="#cardAccordion">
<div class="card-body">
Sweet pie candy jelly. Sesame snaps biscuit sugar plum. Sweet roll topping
fruitcake. Caramels
liquorice biscuit ice cream fruitcake cotton candy tart.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour" data-bs-toggle="collapse"
data-bs-target="#collapseFour" aria-expanded="false"
aria-controls="collapseFour" role="button">
<span class="collapsed collapse-title">Accordion Item 4</span>
</div>
<div id="collapseFour" class="collapse pt-1" aria-labelledby="headingFour"
data-parent="#cardAccordion">
<div class="card-body">
Sweet pie candy jelly. Sesame snaps biscuit sugar plum. Sweet roll topping
fruitcake. Caramels
liquorice biscuit ice cream fruitcake cotton candy tart.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-sm-12">
<div class="card">
<div class="card-content">
<img src="assets/images/samples/motorcycle.jpg" class="card-img-top img-fluid"
alt="singleminded">
<div class="card-body">
<h5 class="card-title">Be Single Minded</h5>
<p class="card-text">
Chocolate sesame snaps apple pie danish cupcake sweet roll jujubes tiramisu.Gummies
bonbon apple pie fruitcake icing biscuit apple pie jelly-o sweet roll.
</p>
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
<div class="card">
<div class="card-content">
<div class="card-body">
<h4 class="card-title mb-0">Video Card</h4>
</div>
<div class="embed-responsive embed-responsive-item embed-responsive-16by9 w-100">
<iframe src="https://www.youtube.com/embed/2b9txcAt4e0" style="width:100%" height="300"
allowfullscreen></iframe>
</div>
<div class="card-body">
<p class="card-text">
Candy cupcake sugar plum oat cake wafer marzipan jujubes.
Jelly-o sesame snaps cheesecake topping. Cupcake fruitcake macaroon donut pastry gummies
tiramisu
chocolate bar muffin.
</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-sm-12">
<div class="card">
<div class="card-content">
<div class="card-body">
<h4 class="card-title">Carousel</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
</div>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/samples/architecture1.jpg" class="d-block w-100"
alt="Image Architecture">
</div>
<div class="carousel-item">
<img src="assets/images/samples/bg-mountain.jpg" class="d-block w-100"
alt="Image Mountain">
</div>
<div class="carousel-item">
<img src="assets/images/samples/jump.jpg" class="d-block w-100" alt="Image Jump">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt assumenda mollitia
officia dolorum eius quasi.Chocolate sesame snaps apple pie danish cupcake sweet roll
jujubes tiramisu.
</p>
<p class="card-text">
Gummies bonbon apple pie fruitcake icing biscuit apple pie jelly-o sweet roll. Toffee
sugar
plum sugar
plum jelly-o jujubes bonbon dessert carrot cake.
Sweet pie candy jelly. Sesame snaps biscuit sugar plum. Sweet roll topping fruitcake.
Caramels liquorice
biscuit ice cream fruitcake cotton candy tart.
</p>
</div>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="card-body">
<h4 class="card-title">Feedback Form</h4>
<p class="card-text">
Gummies bonbon apple pie fruitcake icing biscuit apple pie jelly-o sweet roll. Toffee
sugar
plum sugar
plum jelly-o jujubes bonbon dessert carrot cake.
</p>
<form class="form" method="post">
<div class="form-body">
<div class="form-group">
<label for="feedback1" class="sr-only">Name</label>
<input type="text" id="feedback1" class="form-control" placeholder="Name"
name="name">
</div>
<div class="form-group">
<label for="feedback4" class="sr-only">Last Game</label>
<input type="text" id="feedback4" class="form-control" placeholder="Last Name"
name="LastName">
</div>
<div class="form-group">
<label for="feedback2" class="sr-only">Email</label>
<input type="email" id="feedback2" class="form-control" placeholder="Email"
name="email">
</div>
<div class="form-group">
<select name="reason" class="form-control">
<option value="Inquiry">Inquiry</option>
<option value="Complain">complaints</option>
<option value="Quotation">Quotation</option>
</select>
</div>
<div class="form-group form-label-group">
<textarea class="form-control" id="label-textarea" rows="3"
placeholder="Suggestion"></textarea>
<label for="label-textarea"></label>
</div>
</div>
<div class="form-actions d-flex justify-content-end">
<button type="submit" class="btn btn-primary me-1">Submit</button>
<button type="reset" class="btn btn-light-primary">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="card">
<div class="card-content">
<img class="card-img-top img-fluid" src="assets/images/samples/origami.jpg" alt="Card image cap"
style="height: 20rem" />
<div class="card-body">
<h4 class="card-title">Top Image Cap</h4>
<p class="card-text">
Jelly-o sesame snaps cheesecake topping. Cupcake fruitcake macaroon donut
pastry gummies tiramisu chocolate bar muffin. Dessert bonbon caramels brownie chocolate
bar
chocolate tart dragée.
</p>
<p class="card-text">
Cupcake fruitcake macaroon donut pastry gummies tiramisu chocolate bar muffin.
</p>
<button class="btn btn-primary block">Update now</button>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="card">
<div class="card-content">
<div class="card-body">
<h4 class="card-title">Bottom Image Cap</h4>
<p class="card-text">
Jelly-o sesame snaps cheesecake topping. Cupcake fruitcake macaroon donut
pastry gummies tiramisu chocolate bar muffin. Dessert bonbon caramels brownie chocolate
bar
chocolate tart dragée.
</p>
<p class="card-text">
Cupcake fruitcake macaroon donut pastry gummies tiramisu chocolate bar
muffin.
</p>
<small class="text-muted">Last updated 3 mins ago</small>
</div>
<img class="card-img-bottom img-fluid" src="assets/images/samples/water.jpg"
alt="Card image cap" style="height: 20rem; object-fit: cover;">
</div>
</div>
</div>
</div>
</section>
<!-- Basic Card types section end -->
<!-- Groups section start -->
<section id="groups">
<div class="row match-height">
<div class="col-12 mt-3 mb-1">
<h4 class="section-title text-uppercase">Groups</h4>
</div>
</div>
<div class="row match-height">
<div class="col-12">
<div class="card-group">
<div class="card">
<div class="card-content">
<img class="card-img-top img-fluid" src="assets/images/samples/1.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional
content.</p>
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="card">
<div class="card-content">
<img class="card-img-top img-fluid" src="assets/images/samples/2.png"
alt="Card image cap" />
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional
content.
</p>
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="card">
<div class="card-content">
<img class="card-img-top img-fluid" src="assets/images/samples/3.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional
content.
</p>
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="card">
<div class="card-content">
<img class="card-img-top img-fluid" src="assets/images/samples/4.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional
content.
</p>
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carousel - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item active">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Carousel</h3>
<p class="text-subtitle text-muted"> A slideshow component for cycling through elements—images or slides of
text—like a carousel. </p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Carousel</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h4>Slides only</h4>
<p>A carousel without slide control</p>
</div>
<div class="card-body">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/samples/building.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/samples/architecture1.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>With Captions</h4>
<p>A carousel with captions over the top</p>
</div>
<div class="card-body">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/samples/1.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/samples/2.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h4>With controls</h4>
<p>A carousel with previous and next control</p>
</div>
<div class="card-body">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/samples/banana.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/samples/bg-mountain.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Crossfade Transition</h4>
<p>A carousel crossfade transition</p>
</div>
<div class="card-body">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carouselfade">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleFade" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleFade" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleFade" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/samples/1.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/samples/2.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/samples/3.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collapse - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item active">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Collapse</h3>
<p class="text-subtitle text-muted">Collapse your content and control its visibility with buttons.</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">List Group</li>
</ol>
</nav>
</div>
</div>
</div>
<!-- list groups simple & disabled start -->
<section id="basic-list-group">
<div class="row match-height">
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Simple Collapse</h4>
</div>
<div class="card-body">
<p class="card-text">
Click the buttons below to show and hide another element via class changes:
</p>
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Multiple Targets</h4>
</div>
<div class="card-body">
<p class="card-text">
Click the buttons below to show and hide another element via class changes:
</p>
<p>
<a class="btn btn-primary mb-2" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary mb-2" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- list groups simple & disabled end -->
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item active">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Dropdown</h3>
<p class="text-subtitle text-muted">Multi-purpose dropdown component with tons of variations</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Dropdown</li>
</ol>
</nav>
</div>
</div>
</div>
<section id="basic-dropdown">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Basic</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="btn-group mb-1">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle me-1" type="button"
id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Primary
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
<div class="btn-group mb-1">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle me-1" type="button"
id="dropdownMenuButtonSec" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Secondary
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonSec">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
<div class="btn-group mb-1">
<div class="dropdown">
<button class="btn btn-success dropdown-toggle me-1" type="button"
id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Success
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
<div class="btn-group mb-1">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle me-1" type="button"
id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Info
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
<div class="btn-group mb-1">
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle me-1" type="button"
id="dropdownMenuButton4" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Danger
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton4">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
<div class="btn-group mb-1">
<div class="dropdown">
<button class="btn btn-warning dropdown-toggle me-1" type="button"
id="dropdownMenuButton5" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Warning
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton5">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
<div class="btn-group mb-1">
<div class="dropdown">
<button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenuButton7"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dark
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton7">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Basic Dropdown End -->
<!-- Split Button Dropdown Starts -->
<section id="dropdown-with-split-btn">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Split Dropdowns</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>To create a split button add class <code>.dropdown-toggle-split</code> with your dropdown
toggle class
And to add divider between dropdown item use class <code>.doprdown-divider</code>
</p>
<div class="btn-group dropdown me-1 mb-1">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
data-reference="parent">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item active" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropdown me-1 mb-1">
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
data-reference="parent">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item active" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropdown me-1 mb-1">
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
data-reference="parent">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Header</h6>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropdown me-1 mb-1">
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
data-reference="parent">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item disabled" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropdown me-1 mb-1">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
data-reference="parent">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropdown me-1 mb-1">
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
data-reference="parent">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropdown me-1 mb-1">
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-light dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
data-reference="parent">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropdown mb-1">
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-dark dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
data-reference="parent">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Split Button Dropdown Ends -->
<!-- Dropdown with Icon Starts -->
<section id="dropdown-with-icon">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Dropdown with Icons & Emoji</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>Use <code>.dropdown-item-emoji</code> within <code>.dropdown-item</code> for font-size
and
spacing of emojis.</p>
<div class="btn-group mb-1">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle me-1" type="button"
id="dropdownMenuButtonIcon" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="bi bi-error-circle me-50"></i> Icon Left
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonIcon">
<a class="dropdown-item" href="#"><i class="bi bi-bar-chart-alt-2 me-50"></i>
Option
1</a>
<a class="dropdown-item" href="#"><i class="bi bi-bell me-50"></i> Option 2</a>
<a class="dropdown-item" href="#"><i class="bi bi-time me-50"></i> Option 3</a>
</div>
</div>
</div>
<div class="btn-group mb-1">
<div class="dropdown icon-right">
<button class="btn btn-primary dropdown-toggle me-1" type="button"
id="dropdownMenuButtonIconRight" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Icon Right <i class="bi bi-error-circle ml-50"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonIconRight">
<a class="dropdown-item justify-content-between" href="#">Option 1 <i
class="bi bi-bar-chart-alt-2 ml-50"></i></a>
<a class="dropdown-item justify-content-between" href="#">Option 2 <i
class="bi bi-bell ml-50"></i></a>
<a class="dropdown-item justify-content-between" href="#">Option 3 <i
class="bi bi-time ml-50"></i></a>
</div>
</div>
</div>
<div class="btn-group mb-1">
<div class="dropdown dropdown-color-icon">
<button class="btn btn-primary dropdown-toggle" type="button"
id="dropdownMenuButtonEmoji" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span Class="me-50">🙂</span>Color Emoji icons
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonEmoji">
<a class="dropdown-item" href="#"><span class="dropdown-item-emoji">😆</span>
Option
1</a>
<a class="dropdown-item" href="#"><span class="dropdown-item-emoji">😎</span>
Option
2 </a>
<a class="dropdown-item" href="#"><span class="dropdown-item-emoji">🤩</span>
Option
3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Dropdown with Icon End -->
<!-- Dropdown Direction Starts -->
<section id="dropdown-directions">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Directions</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Add <code>.dropdown-menu-end</code> to a <code>.dropdown-menu</code> to right align the
dropdown menu.
Trigger dropdown menus at the up / right / left of the elements by adding
<code>.dropup | .dropright | .dropleft </code> to the parent element.
</p>
<div class="direction-dropdown-default mt-1">
<div class="btn-group me-1 mb-1">
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Drop bottom right
</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item active" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
<div class="btn-group dropup me-1 mb-1">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Drop up
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item disabled" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
<div class="btn-group dropend me-1 mb-1">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Drop right
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Header</h6>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
<div class="btn-group dropstart mb-1">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Drop left
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item disabled" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Dropdown Direction End -->
<!-- Dropdown Sizes Starts -->
<section id="dropdown-sizes">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Sizes</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>Button dropdowns work with buttons of all sizes, including default and split dropdown
buttons.</p>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="btn-group me-1 mb-1">
<div class="dropdown">
<button type="button" class="btn btn-primary btn-lg dropdown-toggle"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
<div class="btn-group me-1 mb-1">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Default
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
<div class="btn-group mb-1">
<div class="dropdown">
<button type="button" class="btn btn-primary btn-sm dropdown-toggle"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="btn-group dropdown me-1 mb-1">
<button type="button" class="btn btn-primary btn-lg">
Large
</button>
<button type="button"
class="btn btn-primary btn-lg dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
<div class="btn-group dropdown me-1 mb-1">
<button type="button" class="btn btn-primary">
Default
</button>
<button type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
<div class="btn-group dropdown mb-1">
<button type="button" class="btn btn-primary btn-sm">
Small
</button>
<button type="button"
class="btn btn-primary btn-sm dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Dropdown Sizes Ends -->
<!-- Dropdown options Starts -->
<section id="dropdown-options">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Options</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>Use <code>data-offset</code> or <code>data-reference</code> attributes to change the
location
of the dropdown.</p>
<div class="btn-group dropdown me-1 mb-1">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
data-offset="5,20">
Offset
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group dropdown mb-1">
<button type="button" class="btn btn-secondary">Reference</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
id="dropdownMenuReference" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" data-reference="parent">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Dropdown options Ends -->
<!-- Dropdown variations Starts -->
<section id="dropdown-variations">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Variations</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>To create a dropdown with groups you can use <code>.dropdown-header</code> for the header
of
groups
and for sepration of group you can use <code>.dropdown-divider</code>.
</p>
<p>
To create a dropdown with icons use class <code>.dropdown-icon-wrapper</code> with
<code>.dropdown</code>.
</p>
<div class="btn-group dropup me-1 mb-1">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton902"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Groups
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton902">
<h6 class="dropdown-header">Group 1</h6>
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<div class="dropdown-divider"></div>
<h6 class="dropdown-header">Group 2</h6>
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<div class="dropdown-divider"></div>
<h6 class="dropdown-header">Group 3</h6>
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
</div>
</div>
<div class="btn-group dropup dropdown-icon-wrapper me-1 mb-1">
<button type="button" class="btn btn-primary">
Icons
</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="bi bi-wifi dropdown-icon"></i>
</button>
<div class="dropdown-menu">
<span class="dropdown-item">
<i class="bi bi-wifi-off"></i>
</span>
<span class="dropdown-item">
<i class="bi bis-volume"></i>
</span>
<span class="dropdown-item">
<i class="bi bis-volume-full"></i>
</span>
<span class="dropdown-item">
<i class="bi bi-bell"></i>
</span>
<span class="dropdown-item">
<i class="bi bi-bell-off"></i>
</span>
<span class="dropdown-item">
<i class="bi bi-phone"></i>
</span>
</div>
</div>
<div class="btn-group dropup mb-1">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Form
</button>
<div class="dropdown-menu">
<form class="px-2 py-2">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1"
placeholder="email">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control"
id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" class="checkbox-input" id="dropdownCheck1">
<label for="dropdownCheck1">Remember me</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Dropdown variations Ends -->
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Group - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item active">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>List Group</h3>
<p class="text-subtitle text-muted">List groups are a flexible and powerful component for displaying a
series of content</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">List Group</li>
</ol>
</nav>
</div>
</div>
</div>
<!-- list groups simple & disabled start -->
<section id="basic-list-group">
<div class="row match-height">
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Simple List Group</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
The most basic list group is simply an unordered list with list
items, and the proper classes. Build upon it with the options that
follow, or your own CSS as needed.
</p>
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">chocolate cheesecake candy</li>
<li class="list-group-item">Oat cake icing pastry pie carrot</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Disabled items</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>Add <code>.disabled</code> to a <code>.list-group-item</code> to gray it out to appear
disabled.</p>
<div class="list-group">
<span class="list-group-item">
Cras justo odio
</span>
<span class="list-group-item">Dapibus ac facilisis in</span>
<span class="list-group-item disabled">Morbi leo risus</span>
<span class="list-group-item">Porta ac consectetur ac</span>
<span class="list-group-item">Vestibulum at eros</span>
<span class="list-group-item">Biscuit jelly beans macaroon danish pudding</span>
<span class="list-group-item">Oat cake icing pastry pie carrot</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- list groups simple & disabled end -->
<!-- list group button & badge start-->
<section class="list-group-button-badge">
<div class="row match-height">
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Button list Group</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">Cras justo
odio</button>
<button type="button" class="list-group-item list-group-item-action">Dapibus ac
facilisis
in</button>
<button type="button" class="list-group-item list-group-item-action">Morbi leo
risus</button>
<button type="button" class="list-group-item list-group-item-action">Porta ac
consectetur
ac</button>
<button type="button" class="list-group-item list-group-item-action">Vestibulum at
eros</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Badges</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>Use Utility classes <code>.d-flex</code> <code>.justify-content-between</code>
<code>align-items-center</code> to create space between badge and your content
</p>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<span> Biscuit jelly beans macaroon danish pudding.</span>
<span class="badge bg-warning badge-pill badge-round ml-1">8</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span> chocolate cheesecake candy</span>
<span class="badge bg-info badge-pill badge-round ml-1">7</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span> Oat cake icing pastry pie carrot</span>
<span class="badge bg-danger badge-pill badge-round ml-1">6</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span>space between badgeOat cake icing pastry pie carrot</span>
<span class="badge bg-secondary badge-pill badge-round ml-1">5</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- list group button & badge ends -->
<!-- list group Checkboxes and radios start -->
<section id="list-group-icons">
<div class="row match-height">
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Checkboxes and radios</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Place checkboxes and radios within list group items and customize as needed
</p>
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Cras justo odio
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Morbi leo risus
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Porta ac consectetur ac
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Vestibulum at eros
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Vestibulum at eros
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Vestibulum at eros
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Custom content</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Add nearly any HTML within, even for linked list groups like the
one below.
</p>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1 text-white">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed
diam eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed
diam eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed
diam eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- list group Checkboxes and radios end -->
<!-- list group with contextual & horizontal start -->
<section id="list-group-contextual">
<div class="row match-height">
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Contextual classes</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Use contextual classes to style list items, default or linked.
Also includes .active state.
</p>
<ul class="list-group">
<li class="list-group-item list-group-item-primary">
Cras justo odio
</li>
<li class="list-group-item list-group-item-success">
Dapibus ac facilisis in
</li>
<li class="list-group-item list-group-item-danger">
Morbi leo risus
</li>
<li class="list-group-item list-group-item-warning">
Porta ac consectetur ac
</li>
<li class="list-group-item list-group-item-info">
Vestibulum at eros
</li>
<li class="list-group-item list-group-item-light">
chocolate cheesecake candy
</li>
<li class="list-group-item list-group-item-dark">
Oat cake icing pastry pie carrot
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Horizontal</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Add <code>.list-group-horizontal</code> to change the layout of list group items from
vertical to
horizontal across all breakpoints.choose a responsive variantcode <code>
.list-group-horizontal-{sm|md|lg|xl}</code> to make a list group horizontal starting at that
breakpoint’s min-width.
</p>
<div class="list-group list-group-horizontal-sm mb-1 text-center" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-sunday-list"
data-bs-toggle="list" href="#list-sunday" role="tab">Option 1</a>
<a class="list-group-item list-group-item-action" id="list-monday-list"
data-bs-toggle="list" href="#list-monday" role="tab">Option 2</a>
<a class="list-group-item list-group-item-action" id="list-tuesday-list"
data-bs-toggle="list" href="#list-tuesday" role="tab">Option 3</a>
</div>
<div class="tab-content text-justify">
<div class="tab-pane fade show active" id="list-sunday" role="tabpanel"
aria-labelledby="list-sunday-list">Irure enim occaecat labore sit qui aliquip
reprehenderit amet
velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat
laboris sunt dolor.
Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea
aliquip
sunt amet.
Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet
culpa.
Quis ullamco
nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt
dolor
eiusmod eu
pariatur culpa mollit in irure Lorem, ipsum dolor sit amet consectetur adipisicing
elit.
Iusto quis
porro doloribus est natus doloremque, eos laudantium
exercitationem impedit sapiente tenetur soluta reiciendis deserunt!</div>
<div class="tab-pane fade" id="list-monday" role="tabpanel"
aria-labelledby="list-monday-list">Cupidatat
quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do
cillum ad laborum.
Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex.
Officia
anim incididunt
laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation.
Dolor
nisi culpa ex ad
irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa
commodo veniam
incididunt veniam ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Exercitationem, porro!
Amet soluta tempora eveniet blanditiis alias eos, dolor qui consectetur!
</div>
<div class="tab-pane fade" id="list-tuesday" role="tabpanel"
aria-labelledby="list-tuesday-list">Ut ut
do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit
aute
ipsum voluptate.
Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit
consequat enim tempor.
Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure.
Ipsum id
Lorem sit
sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt.
Consectetur et
fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum. Lorem
ipsum dolor sit
amet consectetur adipisicing elit. Molestias, inventore!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- list group with contextual & horizontal ends -->
<!-- List group navigation start -->
<section class="list-group-navigation">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">List group navigation</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="row">
<div class="col-12 col-sm-12 col-md-4">
<div class="list-group" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list"
data-bs-toggle="list" href="#list-home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list"
data-bs-toggle="list" href="#list-profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list"
data-bs-toggle="list" href="#list-messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list"
data-bs-toggle="list" href="#list-settings" role="tab">Settings</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-8 mt-1">
<div class="tab-content text-justify" id="nav-tabContent">
<div class="tab-pane show active" id="list-home" role="tabpanel"
aria-labelledby="list-home-list">
Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing
exercitation fugiat
tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut.
Mollit
voluptate
reprehenderit
occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id
ut
nulla. Ea et fugiat
aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor.
Anim ad
Lorem aliqua in
cupidatat nisi enim eu nostrud do aliquip veniam minim. Lorem ipsum dolor
sit
amet consectetur,
adipisicing elit. Aliquam itaque nisi obcaecati doloremque et est ex
possimus
quidem dolorem soluta.
</div>
<div class="tab-pane" id="list-profile" role="tabpanel"
aria-labelledby="list-profile-list">
Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur
consectetur
ex nisi eu do cillum
ad
laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex
amet
id ex. Officia anim
incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do
exercitation. Dolor
nisi
culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure
non
commodo enim culpa
commodo veniam incididunt veniam ad.</div>
<div class="tab-pane" id="list-messages" role="tabpanel"
aria-labelledby="list-messages-list">Ut ut
do pariatur aliquip aliqua aliquip exercitation do nostrud commodo
reprehenderit
aute ipsum
voluptate.
Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit
mollit
consequat enim
tempor.
Consectetur est minim nostrud nostrud consectetur irure labore voluptate
irure.
Ipsum id Lorem sit
sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod
deserunt. Consectetur et
fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur
cillum.
</div>
<div class="tab-pane" id="list-settings" role="tabpanel"
aria-labelledby="list-settings-list">Irure
enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt
ullamco
ex elit nostrud ut
dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim
cillum
occaecat aute est
cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit
dolor ut
exercitation irure
commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui
aute
irure eu. Magna labore
dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa
mollit
in irure</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- List group navigation ends -->
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item active">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Modal</h3>
<p class="text-subtitle text-muted">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site
for lightboxes, user notifications, or completely
custom content</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Modal</li>
</ol>
</nav>
</div>
</div>
</div>
<section id="basic-modals">
<div class="row">
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Basic Modal</h4>
</div>
<div class="card-body">
<p>
Toggle a modal via JavaScript by clicking the button above.
You can use modal to add dialogs to your site for lightboxes, user
notifications, or completely custom content.
</p>
<!-- Button trigger for basic modal -->
<button type="button" class="btn btn-outline-primary block" data-bs-toggle="modal"
data-bs-target="#default">
Launch Modal
</button>
<!--Basic Modal -->
<div class="modal fade text-left" id="default" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel1" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel1">Basic Modal</h5>
<button type="button" class="close rounded-pill" data-bs-dismiss="modal"
aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
<p>
Bonbon caramels muffin. Chocolate bar oat cake cookie pastry dragée pastry.
Carrot cake
chocolate tootsie roll chocolate bar candy canes biscuit.
Gummies bonbon apple pie fruitcake icing biscuit apple pie jelly-o sweet
roll. Toffee sugar
plum sugar plum jelly-o jujubes bonbon dessert carrot cake. Cookie dessert
tart muffin topping
donut icing fruitcake. Sweet roll cotton candy dragée danish Candy canes
chocolate bar cookie.
Gingerbread apple pie oat cake. Carrot cake fruitcake bear claw. Pastry
gummi bears
marshmallow jelly-o.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button type="button" class="btn btn-primary ml-1" data-bs-dismiss="modal">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">BorderLess Modal</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Toggle a Boderless via JavaScript by clicking the button above. Use
<code>.modal-borderless</code>
with <code>.modal</code>for BorderLess modal.
</p>
<!-- Button trigger for BorderLess Modal -->
<button type="button" class="btn btn-outline-primary block" data-bs-toggle="modal"
data-bs-target="#border-less">
Launch Modal
</button>
<!--BorderLess Modal Modal -->
<div class="modal fade text-left modal-borderless" id="border-less" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Border-Less</h5>
<button type="button" class="close rounded-pill" data-bs-dismiss="modal"
aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
<p>
Bonbon caramels muffin. Chocolate bar oat cake cookie pastry dragée
pastry. Carrot cake
chocolate tootsie roll chocolate bar candy canes biscuit.
Gummies bonbon apple pie fruitcake icing biscuit apple pie jelly-o sweet
roll. Toffee sugar
plum sugar plum jelly-o jujubes bonbon dessert carrot cake. Cookie
dessert tart muffin topping
donut icing fruitcake. Sweet roll cotton candy dragée danish Candy canes
chocolate bar cookie.
Gingerbread apple pie oat cake. Carrot cake fruitcake bear claw. Pastry
gummi bears
marshmallow jelly-o.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-primary" data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button type="button" class="btn btn-primary ml-1" data-bs-dismiss="modal">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">
Vertically Centered
</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Add <code>.modal-dialog-centered</code> to <code>.modal-dialog</code> to vertically
center the modal.
</p>
<!-- button trigger for Vertically Centered modal -->
<button type="button" class="btn btn-outline-primary block" data-bs-toggle="modal"
data-bs-target="#exampleModalCenter">
Launch Modal
</button>
<!-- Vertically Centered modal Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-centered modal-dialog-scrollable"
role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Vertically Centered
</h5>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
<p>
Croissant jelly-o halvah chocolate sesame snaps. Brownie caramels candy
canes chocolate cake
marshmallow icing lollipop I love. Gummies macaroon donut caramels
biscuit topping danish.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button type="button" class="btn btn-primary ml-1" data-bs-dismiss="modal">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Disabled Backdrop</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>You can disable the backdrop by using <code>data-bs-backdrop="false"</code></p>
<!-- Button trigger for Disabled Backdrop -->
<button type="button" class="btn btn-outline-primary block" data-bs-toggle="modal"
data-bs-target="#backdrop">
Launch Modal
</button>
<!--Disabled Backdrop Modal -->
<div class="modal fade text-left" id="backdrop" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel4" data-bs-backdrop="false" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel4">Disabled Backdrop</h4>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
<p>
Candy oat cake topping topping chocolate cake. Icing pudding jelly beans
I love chocolate carrot
cake wafer candy canes. Biscuit croissant fruitcake bonbon soufflé.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button type="button" class="btn btn-primary ml-1" data-bs-dismiss="modal">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Basic Modals end -->
<!-- Modal Themes start -->
<section id="modal-themes">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Modal Themes</h4>
</div>
<div class="card-content">
<div class="card-body">
<p class="mb-1">
Use class <code>.bg-*</code> with your <code>.modal-header</code> to change theme of
modal
</p>
<div class="row">
<div class="col-12">
<div class="modal-primary me-1 mb-1 d-inline-block">
<!-- Button trigger for primary themes modal -->
<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal"
data-bs-target="#primary">
Primary
</button>
<!--primary theme Modal -->
<div class="modal fade text-left" id="primary" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel160" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document">
<div class="modal-content">
<div class="modal-header bg-primary">
<h5 class="modal-title white" id="myModalLabel160">Primary Modal
</h5>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
Tart lemon drops macaroon oat cake chocolate toffee chocolate
bar icing. Pudding jelly beans
carrot cake pastry gummies cheesecake lollipop. I love cookie
lollipop cake I love sweet
gummi
bears cupcake dessert.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button type="button" class="btn btn-primary ml-1"
data-bs-dismiss="modal">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-success me-1 mb-1 d-inline-block">
<!-- Button trigger for Success theme modal -->
<button type="button" class="btn btn-outline-success" data-bs-toggle="modal"
data-bs-target="#success">
Success
</button>
<!--Success theme Modal -->
<div class="modal fade text-left" id="success" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel110" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document">
<div class="modal-content">
<div class="modal-header bg-success">
<h5 class="modal-title white" id="myModalLabel110">Success Modal
</h5>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
Tart lemon drops macaroon oat cake chocolate toffee chocolate
bar icing. Pudding jelly beans
carrot cake pastry gummies cheesecake lollipop. I love cookie
lollipop cake I love sweet
gummi
bears cupcake dessert.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button type="button" class="btn btn-success ml-1"
data-bs-dismiss="modal">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-danger me-1 mb-1 d-inline-block">
<!-- Button trigger for danger theme modal -->
<button type="button" class="btn btn-outline-danger" data-bs-toggle="modal"
data-bs-target="#danger">
Danger
</button>
<!--Danger theme Modal -->
<div class="modal fade text-left" id="danger" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel120" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document">
<div class="modal-content">
<div class="modal-header bg-danger">
<h5 class="modal-title white" id="myModalLabel120">Danger Modal
</h5>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
Tart lemon drops macaroon oat cake chocolate toffee chocolate
bar icing. Pudding jelly beans
carrot cake pastry gummies cheesecake lollipop. I love cookie
lollipop cake I love sweet
gummi bears cupcake dessert.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button type="button" class="btn btn-danger ml-1"
data-bs-dismiss="modal">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-info me-1 mb-1 d-inline-block">
<!-- Button trigger for info theme modal -->
<button type="button" class="btn btn-outline-info" data-bs-toggle="modal"
data-bs-target="#info">
Info
</button>
<!--info theme Modal -->
<div class="modal fade text-left" id="info" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel130" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document">
<div class="modal-content">
<div class="modal-header bg-info">
<h5 class="modal-title white" id="myModalLabel130">Info Modal
</h5>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
Tart lemon drops macaroon oat cake chocolate toffee chocolate
bar icing. Pudding jelly beans
carrot cake pastry gummies cheesecake lollipop. I love cookie
lollipop cake I love sweet
gummi bears cupcake dessert.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button type="button" class="btn btn-info ml-1"
data-bs-dismiss="modal">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-warning me-1 mb-1 d-inline-block">
<!-- Button trigger for warning theme modal -->
<button type="button" class="btn btn-outline-warning" data-bs-toggle="modal"
data-bs-target="#warning">
Warning
</button>
<!--warning theme Modal -->
<div class="modal fade text-left" id="warning" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel140" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document">
<div class="modal-content">
<div class="modal-header bg-warning">
<h5 class="modal-title white" id="myModalLabel140">Warning Modal
</h5>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
Tart lemon drops macaroon oat cake chocolate toffee chocolate
bar icing. Pudding jelly beans
carrot cake pastry gummies cheesecake lollipop. I love cookie
lollipop cake I love sweet
gummi bears cupcake dessert.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button type="button" class="btn btn-warning ml-1"
data-bs-dismiss="modal">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-dark me-1 mb-1 d-inline-block">
<!-- Button trigger for dark modal -->
<button type="button" class="btn btn-outline-dark" data-bs-toggle="modal"
data-bs-target="#dark">
Dark
</button>
<!--Dark theme Modal -->
<div class="modal fade text-left" id="dark" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel150" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document">
<div class="modal-content">
<div class="modal-header bg-dark white">
<span class="modal-title" id="myModalLabel150">Dark Modal</span>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
Tart lemon drops macaroon oat cake chocolate toffee chocolate
bar icing. Pudding jelly beans
carrot cake pastry gummies cheesecake lollipop. I love cookie
lollipop cake I love sweet
gummi bears cupcake dessert.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button type="button" class="btn btn-dark ml-1"
data-bs-dismiss="modal">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Modal Themes end -->
<!-- Modal Sizes start -->
<section id="modal-sizes">
<div class="card">
<div class="card-header">
<h4 class="card-title">Modal Sizes</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Add class <code>.modal-{sm|lg|xl|full}</code> with <code>.modal-dialog</code> to create a modal
with
different size.
</p>
<div class="row">
<div class="col-12">
<!--Modal sm size -->
<div class="me-1 mb-1 d-inline-block">
<!-- Button trigger for small size modal modal -->
<button type="button" class="btn btn-outline-warning" data-bs-toggle="modal"
data-bs-target="#small">
Small Modal
</button>
<!--small size modal -->
<div class="modal fade text-left" id="small" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel19" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-sm"
role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel19">Small Modal</h4>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
Biscuit chocolate cake gummies. Lollipop I love macaroon bear claw
caramels. I love
marshmallow tiramisu I love fruitcake I love gummi bears.
Carrot cake topping liquorice. Pudding caramels liquorice sweet I love.
Donut powder cupcake
ice cream tootsie roll jelly.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary btn-sm"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-sm-block d-none">Close</span>
</button>
<button type="button" class="btn btn-primary ml-1 btn-sm"
data-bs-dismiss="modal">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-sm-block d-none">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!--Modal default md size -->
<div class="me-1 mb-1 d-inline-block">
<!-- Button trigger for default modal -->
<button type="button" class="btn btn-outline-warning" data-bs-toggle="modal"
data-bs-target="#defaultSize">
Default Modal
</button>
<!--Default size Modal -->
<div class="modal fade text-left" id="defaultSize" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel18" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel18">Default Modal</h4>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
I love candy candy cake powder I love icing ice cream pastry. Biscuit
lemon drops sesame
snaps. Topping biscuit croissant gummi bears jelly beans cake cake bear
claw muffin. Lemon
drops oat cake pastry bear claw liquorice lemon drops.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button type="button" class="btn btn-primary ml-1"
data-bs-dismiss="modal">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!--Modal lg size -->
<div class="me-1 mb-1 d-inline-block">
<!-- Button trigger for large size modal -->
<button type="button" class="btn btn-outline-warning" data-bs-toggle="modal"
data-bs-target="#large">
Large Modal
</button>
<!--large size Modal -->
<div class="modal fade text-left" id="large" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel17" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg"
role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel17">Large Modal</h4>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
I love tart cookie cupcake. I love chupa chups biscuit. I love
marshmallow apple pie wafer
liquorice. Marshmallow cotton candy chocolate. Apple pie muffin tart.
Marshmallow halvah pie
marzipan lemon drops jujubes. Macaroon sugar plum cake icing toffee.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button type="button" class="btn btn-primary ml-1"
data-bs-dismiss="modal">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!--Modal Xl size -->
<div class="me-1 mb-1 d-inline-block">
<!-- Button trigger for Extra Large modal -->
<button type="button" class="btn btn-outline-warning" data-bs-toggle="modal"
data-bs-target="#xlarge">
Extra Large Modal
</button>
<!--Extra Large Modal -->
<div class="modal fade text-left w-100" id="xlarge" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel16" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl"
role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel16">Extra Large Modal</h4>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
Cake cupcake sugar plum. Sesame snaps pudding cupcake candy canes icing
cheesecake. Sweet roll
pudding lollipop apple pie gummies dragée. Chocolate bar cookie caramels
I love lollipop ice
cream tiramisu lollipop sweet.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button type="button" class="btn btn-primary ml-1"
data-bs-dismiss="modal">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!--Modal full size -->
<div class="me-1 mb-1 d-inline-block">
<!-- Button trigger for full size modal -->
<button type="button" class="btn btn-outline-warning" data-bs-toggle="modal"
data-bs-target="#full-scrn">
Full Screen Modal
</button>
<!-- full size modal-->
<div class="modal fade text-left w-100" id="full-scrn" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel20" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-full"
role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel20">Full Screen Modal</h4>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
Cake cupcake sugar plum. Sesame snaps pudding cupcake candy canes icing
cheesecake. Sweet roll
pudding lollipop apple pie gummies dragée. Chocolate bar cookie caramels
I love lollipop ice
cream tiramisu lollipop sweet.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button type="button" class="btn btn-primary ml-1"
data-bs-dismiss="modal">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Modal Sizes end -->
<!-- Form and scrolling Components start -->
<section id="form-and-scrolling-components">
<div class="row">
<div class="col-md-6 col-12">
<div class="card">
<div class="card-content">
<div class="card-body">
<div class="form-group">
<h4 class="card-title">Modal with Login Form</h4>
<p> Created Simple Login Form.</p>
<!-- Button trigger for login form modal -->
<button type="button" class="btn btn-outline-success" data-bs-toggle="modal"
data-bs-target="#inlineForm">
Launch Modal
</button>
<!--login form Modal -->
<div class="modal fade text-left" id="inlineForm" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel33" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel33">Login Form </h4>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<form action="#">
<div class="modal-body">
<label>Email: </label>
<div class="form-group">
<input type="text" placeholder="Email Address"
class="form-control">
</div>
<label>Password: </label>
<div class="form-group">
<input type="password" placeholder="Password"
class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button type="button" class="btn btn-primary ml-1"
data-bs-dismiss="modal">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">login</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Scrolling long Content</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>If your content is longer you the page will autmatically adopt a scrollbar</p>
<!-- Button trigger for scrollbar modal -->
<button type="button" class="btn btn-outline-success" data-bs-toggle="modal"
data-bs-target="#exampleModalLong">
Launch demo modal
</button>
<!--scrollbar Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Scrolling Modal</h5>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
<p>
Biscuit powder jelly beans. Lollipop candy canes croissant icing
chocolate cake. Cake fruitcake
powder pudding pastry.
</p>
<p>
Tootsie roll oat cake I love bear claw I love caramels caramels halvah
chocolate bar. Cotton
candy
gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon drops
danish dessert I love
caramels powder.
</p>
<p>
Chocolate cake icing tiramisu liquorice toffee donut sweet roll cake.
Cupcake dessert icing
dragée
dessert. Liquorice jujubes cake tart pie donut. Cotton candy candy canes
lollipop liquorice
chocolate marzipan muffin pie liquorice.
</p>
<p>
Powder cookie jelly beans sugar plum ice cream. Candy canes I love
powder sugar plum tiramisu.
Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops
apple pie sesame snaps
tootsie
roll carrot cake soufflé halvah.
Biscuit powder jelly beans. Lollipop candy canes croissant icing
chocolate cake. Cake fruitcake
powder pudding pastry.
</p>
<p>
Tootsie roll oat cake I love bear claw I love caramels caramels halvah
chocolate bar. Cotton
candy
gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon drops
danish dessert I love
caramels powder
</p>
<p>
Chocolate cake icing tiramisu liquorice toffee donut sweet roll cake.
Cupcake dessert icing
dragée
dessert. Liquorice jujubes cake tart pie donut. Cotton candy candy canes
lollipop liquorice
chocolate marzipan muffin pie liquorice.
</p>
<p>
Powder cookie jelly beans sugar plum ice cream. Candy canes I love
powder sugar plum tiramisu.
Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops
apple pie sesame snaps
tootsie
roll carrot cake soufflé halvah.
Biscuit powder jelly beans. Lollipop candy canes croissant icing
chocolate cake. Cake fruitcake
powder pudding pastry.
</p>
<p>
Tootsie roll oat cake I love bear claw I love caramels caramels halvah
chocolate bar. Cotton
candy
gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon drops
danish dessert I love
caramels powder.
</p>
<p>
Chocolate cake icing tiramisu liquorice toffee donut sweet roll cake.
Cupcake dessert icing
dragée
dessert. Liquorice jujubes cake tart pie donut. Cotton candy candy canes
lollipop liquorice
chocolate marzipan muffin pie liquorice.
</p>
<p>
Powder cookie jelly beans sugar plum ice cream. Candy canes I love
powder sugar plum tiramisu.
Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops
apple pie sesame snaps
tootsie
roll carrot cake soufflé halvah.
Biscuit powder jelly beans. Lollipop candy canes croissant icing
chocolate cake. Cake fruitcake
powder pudding pastry.
</p>
<p>
Tootsie roll oat cake I love bear claw I love caramels caramels halvah
chocolate bar. Cotton
candy
gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon drops
danish dessert I love
caramels powder.
</p>
<p>
Chocolate cake icing tiramisu liquorice toffee donut sweet roll cake.
Cupcake dessert icing
dragée
dessert. Liquorice jujubes cake tart pie donut. Cotton candy candy canes
lollipop liquorice
chocolate marzipan muffin pie liquorice.
</p>
<p>
Powder cookie jelly beans sugar plum ice cream. Candy canes I love
powder sugar plum tiramisu.
Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops
apple pie sesame snaps
tootsie
roll carrot cake soufflé halvah.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button type="button" class="btn btn-primary ml-1" data-bs-dismiss="modal">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Scrolling long Content Inside Modal</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>You can also create a scrollable modal that allows scroll the modal body by adding
<code>.modal-dialog-scrollable</code> to <code>.modal-dialog</code>.
</p>
<!-- Button trigger for scrolling content modal -->
<button type="button" class="btn btn-outline-success" data-bs-toggle="modal"
data-bs-target="#exampleModalScrollable">
Launch demo modal
</button>
<!--scrolling content Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog"
aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">Scrolling long
Content</h5>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
<p>
Biscuit powder jelly beans. Lollipop candy canes croissant icing
chocolate cake. Cake fruitcake
powder pudding pastry
</p>
<p>
Tootsie roll oat cake I love bear claw I love caramels caramels halvah
chocolate bar. Cotton
candy
gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon drops
danish dessert I love
caramels powder
</p>
<p>
Chocolate cake icing tiramisu liquorice toffee donut sweet roll cake.
Cupcake dessert icing
dragée dessert. Liquorice jujubes cake tart pie donut. Cotton candy
candy canes lollipop liquorice
chocolate marzipan muffin pie liquorice.
</p>
<p>
Powder cookie jelly beans sugar plum ice cream. Candy canes I love
powder sugar plum tiramisu.
Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops
apple pie sesame snaps
tootsie roll carrot cake soufflé halvah. Biscuit powder jelly beans.
Lollipop candy canes
croissant icing chocolate cake. Cake fruitcake powder pudding pastry.
</p>
<p>
Tootsie roll oat cake I love bear claw I love caramels caramels halvah
chocolate bar. Cotton
candy gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon
drops danish dessert I
love caramels powder.
</p>
<p>
dragée dessert. Liquorice jujubes cake tart pie donut. Cotton candy
candy canes lollipop liquorice
chocolate marzipan muffin pie liquorice.
</p>
<p>
Powder cookie jelly beans sugar plum ice cream. Candy canes I love
powder sugar plum tiramisu.
Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops
apple pie sesame snaps
tootsie roll carrot cake soufflé halvah.Biscuit powder jelly beans.
Lollipop candy canes croissant
icing chocolate cake. Cake fruitcake powder pudding pastry.
</p>
<p>
Tootsie roll oat cake I love bear claw I love caramels caramels halvah
chocolate bar. Cotton
candy gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon
drops danish dessert I
love caramels powder.
</p>
<p>
Chocolate cake icing tiramisu liquorice toffee donut sweet roll cake.
Cupcake dessert icing
dragée dessert. Liquorice jujubes cake tart pie donut. Cotton candy
candy canes lollipop liquorice
chocolate marzipan muffin pie liquorice.
</p>
<p>
Powder cookie jelly beans sugar plum ice cream. Candy canes I love
powder sugar plum tiramisu.
Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops
apple pie sesame snaps
tootsie roll carrot cake soufflé halvah. Biscuit powder jelly beans.
Lollipop candy canes
croissant icing chocolate cake. Cake fruitcake powder pudding pastry.
</p>
<p>
Tootsie roll oat cake I love bear claw I love caramels caramels halvah
chocolate bar. Cotton
candy gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon
drops danish dessert I
love caramels powder.
</p>
<p>
Chocolate cake icing tiramisu liquorice toffee donut sweet roll cake.
Cupcake dessert icing
dragée dessert. Liquorice jujubes cake tart pie donut. Cotton candy
candy canes lollipop liquorice
chocolate marzipan muffin pie liquorice.
</p>
<p>
Powder cookie jelly beans sugar plum ice cream. Candy canes I love
powder sugar plum tiramisu.
Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops
apple pie sesame snaps
tootsie roll carrot cake soufflé halvah.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button type="button" class="btn btn-primary ml-1" data-bs-dismiss="modal">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Disabled Animation</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
For modals that simply appear rather than fade in to view, remove the <code>.fade</code>
class from your
modal markup.
</p>
<!-- Button trigger for disabled animation modal -->
<button type="button" class="btn btn-outline-success" data-bs-toggle="modal"
data-bs-target="#animation">
Launch demo modal
</button>
<!-- disabled animation Modal -->
<div class="modal text-left" id="animation" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel6" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel6">Disabled Animation</h4>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
<p>
Chocolate bar jelly dragée cupcake chocolate bar I love donut liquorice.
Powder I love marzipan
donut candy canes jelly-o. Dragée liquorice apple pie candy biscuit
danish lemon drops sugar plum.
</p>
<div class="alert bg-rgba-success" role="alert">
<span class="text-bold-600">Well done!</span>
You successfully read this important alert
message.
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button type="button" class="btn btn-primary ml-1" data-bs-dismiss="modal">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Form and scrolling Components end -->
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navs - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item active">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Navs</h3>
<p class="text-subtitle text-muted">Examples for how to use Bootstrap’s included navigation components
</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Navs</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="card">
<div class="card-header">
<h4 class="card-title">Default</h4>
</div>
<div class="card-body">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">Horizontal Navs</h5>
</div>
<div class="card-body">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<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" role="presentation">
<a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab"
aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role="presentation">
<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="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<p class='my-2'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nulla
neque. Ut hendrerit nulla a euismod pretium.
Fusce venenatis sagittis ex efficitur suscipit. In tempor mattis fringilla. Sed id
tincidunt orci, et volutpat ligula.
Aliquam sollicitudin sagittis ex, a rhoncus nisl feugiat quis. Lorem ipsum dolor sit
amet, consectetur adipiscing elit.
Nunc ultricies ligula a tempor vulputate. Suspendisse pretium mollis ultrices.</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Integer interdum diam eleifend metus lacinia, quis gravida eros mollis. Fusce non sapien
sit amet magna dapibus
ultrices. Morbi tincidunt magna ex, eget faucibus sapien bibendum non. Duis a mauris ex.
Ut finibus risus sed massa
mattis porta. Aliquam sagittis massa et purus efficitur ultricies. Integer pretium dolor
at sapien laoreet ultricies.
Fusce congue et lorem id convallis. Nulla volutpat tellus nec molestie finibus. In nec
odio tincidunt eros finibus
ullamcorper. Ut sodales, dui nec posuere finibus, nisl sem aliquam metus, eu accumsan
lacus felis at odio. Sed lacus
quam, convallis quis condimentum ut, accumsan congue massa. Pellentesque et quam vel
massa pretium ullamcorper vitae eu
tortor.
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<p class="mt-2">Duis ultrices purus non eros fermentum hendrerit. Aenean ornare interdum
viverra. Sed ut odio velit. Aenean eu diam
dictum nibh rhoncus mattis quis ac risus. Vivamus eu congue ipsum. Maecenas id
sollicitudin ex. Cras in ex vestibulum,
posuere orci at, sollicitudin purus. Morbi mollis elementum enim, in cursus sem
placerat ut.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h4 class="card-title">Javascript Behavior</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"
aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill"
href="#v-pills-home" role="tab" aria-controls="v-pills-home"
aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill"
href="#v-pills-profile" role="tab" aria-controls="v-pills-profile"
aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill"
href="#v-pills-messages" role="tab" aria-controls="v-pills-messages"
aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill"
href="#v-pills-settings" role="tab" aria-controls="v-pills-settings"
aria-selected="false">Settings</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
aria-labelledby="v-pills-home-tab">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nulla neque.
Ut hendrerit nulla a euismod pretium.
Fusce venenatis sagittis ex efficitur suscipit. In tempor mattis fringilla. Sed
id tincidunt orci, et volutpat ligula.
Aliquam sollicitudin sagittis ex, a rhoncus nisl feugiat quis. Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
Nunc ultricies ligula a tempor vulputate. Suspendisse pretium mollis ultrices
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel"
aria-labelledby="v-pills-profile-tab">
Integer interdum diam eleifend metus lacinia, quis gravida eros mollis. Fusce
non sapien sit amet magna dapibus
ultrices. Morbi tincidunt magna ex, eget faucibus sapien bibendum non. Duis a
mauris ex. Ut finibus risus sed massa
mattis porta. Aliquam sagittis massa et purus efficitur ultricies.
</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel"
aria-labelledby="v-pills-messages-tab">
Integer pretium dolor at sapien laoreet ultricies. Fusce congue et lorem id
convallis. Nulla volutpat tellus nec
molestie finibus. In nec odio tincidunt eros finibus ullamcorper. Ut sodales,
dui nec posuere finibus, nisl sem aliquam
metus, eu accumsan lacus felis at odio.
</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel"
aria-labelledby="v-pills-settings-tab">
Sed lacus quam, convallis quis condimentum ut, accumsan congue massa.
Pellentesque et quam vel massa pretium ullamcorper
vitae eu tortor.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item active">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Pagination</h3>
<p class="text-subtitle text-muted">Examples for showing pagination to indicate a series of related
content exists across multiple pages</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Navs</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h4>Basic Pagination</h4>
</div>
<div class="card-body">
<p>Pagination with active item</p>
<nav aria-label="Page navigation example">
<ul class="pagination pagination-primary">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h4>Pagination with Icon</h4>
</div>
<div class="card-body">
<p>Change prev and next button into icon</p>
<nav aria-label="Page navigation example">
<ul class="pagination pagination-primary">
<li class="page-item"><a class="page-link" href="#">
<span aria-hidden="true"><i class="bi bi-chevron-left"></i></span>
</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">
<span aria-hidden="true"><i class="bi bi-chevron-right"></i></span>
</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h4>Pagination Color </h4>
</div>
<div class="card-body">
<p>To add pagination with different color option, use class <code>.pagination-{colorName}</code>
with <code>.pagination</code> class.</p>
<nav aria-label="Page navigation example">
<ul class="pagination pagination-danger">
<li class="page-item"><a class="page-link" href="#">
<span aria-hidden="true"><i class="bi bi-chevron-left"></i></span>
</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">
<span aria-hidden="true"><i class="bi bi-chevron-right"></i></span>
</a></li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination pagination-dark">
<li class="page-item"><a class="page-link" href="#">
<span aria-hidden="true"><i class="bi bi-chevron-left"></i></span>
</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">
<span aria-hidden="true"><i class="bi bi-chevron-right"></i></span>
</a></li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination pagination-success">
<li class="page-item"><a class="page-link" href="#">
<span aria-hidden="true"><i class="bi bi-chevron-left"></i></span>
</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item active"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">
<span aria-hidden="true"><i class="bi bi-chevron-right"></i></span>
</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h4>Pagination Size</h4>
</div>
<div class="card-body">
<p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or
<code>.pagination-sm</code> for additional sizes.
</p>
<nav aria-label="Page navigation example">
<ul class="pagination pagination-primary pagination-sm">
<li class="page-item"><a class="page-link" href="#">
<span aria-hidden="true"><i class="bi bi-chevron-left"></i></span>
</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">
<span aria-hidden="true"><i class="bi bi-chevron-right"></i></span>
</a></li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination pagination-primary">
<li class="page-item"><a class="page-link" href="#">
<span aria-hidden="true"><i class="bi bi-chevron-left"></i></span>
</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">
<span aria-hidden="true"><i class="bi bi-chevron-right"></i></span>
</a></li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination pagination-primary pagination-lg">
<li class="page-item"><a class="page-link" href="#">
<span aria-hidden="true"><i class="bi bi-chevron-left"></i></span>
</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">
<span aria-hidden="true"><i class="bi bi-chevron-right"></i></span>
</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="card">
<div class="card-header">
<h4>Alignment</h4>
</div>
<div class="card-body">
<p>Change the alignment of pagination components with flexbox utilities.</p>
<nav aria-label="Page navigation example">
<ul class="pagination pagination-primary">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination pagination-primary justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination pagination-primary justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item active">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Progress</h3>
<p class="text-subtitle text-muted">Examples for how to use Bootstrap’s included progress components
</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Progress</li>
</ol>
</nav>
</div>
</div>
</div>
<!-- Default Progress Start -->
<section class="section">
<div class="card">
<div class="card-header">
<h4>Default</h4>
</div>
<div class="card-body">
<p>Use class <code>.progress-bar-{color-name}</code> to add different colors to progressbar.</p>
<div class="progress progress-primary mb-3">
<div class="progress-bar" role="progressbar" style="width: 35%" aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="progress progress-secondary mb-3">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="progress progress-warning mb-3">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="progress progress-danger mb-3">
<div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="progress progress-dark mb-3">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-info mb-3">
<div class="progress-bar" role="progressbar" style="width: 88%" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</section>
<!-- Default Progress End -->
<!-- Progress Label Start -->
<section class="section">
<div class="card">
<div class="card-header">
<h4>Progress Label</h4>
</div>
<div class="card-body">
<p>Use class <code>.progress-bar-{color-name}</code> to add different colors to progressbar.</p>
<div class="progress progress-primary mb-4">
<div class="progress-bar progress-label" role="progressbar" style="width: 35%" aria-valuenow="35"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-secondary mb-4">
<div class="progress-bar progress-label" role="progressbar" style="width: 25%" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-warning mb-4">
<div class="progress-bar progress-label" role="progressbar" style="width: 50%" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-danger mb-4">
<div class="progress-bar progress-label" role="progressbar" style="width: 40%" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-dark mb-4">
<div class="progress-bar progress-label" role="progressbar" style="width: 75%" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-info mb-4">
<div class="progress-bar progress-label" role="progressbar" style="width: 88%" aria-valuenow="88"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</section>
<!-- Progress Label End -->
<!-- Progress Label Start -->
<section class="section">
<div class="card">
<div class="card-header">
<h4>Progress Striped</h4>
</div>
<div class="card-body">
<p>Add <code>.progress-bar-striped</code> to any <code>.progress-bar</code> to apply a stripe via CSS
gradient over the progress bar’s background
color.</p>
<div class="progress progress-primary mb-4">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 35%"
aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-secondary mb-4">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 25%"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-warning mb-4">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 50%"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-danger mb-4">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 40%"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-dark mb-4">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 75%"
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-info mb-4">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 88%"
aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</section>
<!-- Progress Label End -->
<!-- Progress Sizes Start -->
<section class="section">
<div class="card">
<div class="card-header">
<h4>Progress Sizes</h4>
</div>
<div class="card-body">
<p>For Default progress, No size class needed. you can use class <code>.progress-sm</code> or
<code>.progress-lg</code> with <code>.progress</code> to change size of your
progress bar.
</p>
<div class="progress progress-success progress-sm mb-4">
<div class="progress-bar" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="progress progress-primary mb-4">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="progress progress-warning progress-lg mb-4">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
</div>
</section>
<!-- Progress Label End -->
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spinner - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item active">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Spinner</h3>
<p class="text-subtitle text-muted">Indicate the loading state of a component or page with Bootstrap
spinners, built entirely with HTML, CSS, and no JavaScript.</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Progress</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="row">
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h5>Basic Spinners</h5>
</div>
<div class="card-body">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>Sizing</h5>
</div>
<div class="card-body">
<div>
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="mt-2">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="mt-2">
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>Custom Loader</h5>
</div>
<div class="card-body">
<img src="assets/images/svg-loaders/audio.svg" class="me-4" style="width: 3rem" alt="audio">
<img src="assets/images/svg-loaders/ball-triangle.svg" class="me-4" style="width: 3rem"
alt="audio">
<img src="assets/images/svg-loaders/circles.svg" class="me-4" style="width: 3rem" alt="audio">
<img src="assets/images/svg-loaders/grid.svg" class="me-4" style="width: 3rem" alt="audio">
<img src="assets/images/svg-loaders/hearts.svg" class="me-4" style="width: 3rem" alt="audio">
<img src="assets/images/svg-loaders/oval.svg" class="me-4" style="width: 3rem" alt="audio">
<img src="assets/images/svg-loaders/puff.svg" class="me-4" style="width: 3rem" alt="audio">
<img src="assets/images/svg-loaders/rings.svg" class="me-4" style="width: 3rem" alt="audio">
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h5>Spinner Growing</h5>
</div>
<div class="card-body">
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>Spinner-in-button</h5>
</div>
<div class="card-body">
<div class="mb-2">
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
</div>
<div class="mb-2">
<button class="btn btn-secondary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-secondary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Processing...
</button>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item active">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Tooltip</h3>
<p class="text-subtitle text-muted">The tooltip, also known as infotip or hint, is a common graphical
user interface element which shows additional information on element hover.</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Tooltip</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="row">
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h5>Basic Tooltip</h5>
</div>
<div class="card-body">
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top"
title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip"
data-bs-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip"
data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip"
data-bs-placement="left" title="Tooltip on left">
Tooltip on left
</button>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h5>Tooltip in Text</h5>
</div>
<div class="card-body">
Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip"
title="Some tooltip text!">you probably</a> haven't heard of them. Photo booth beard raw
denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie
sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip"
title="Another tooltip text!">have a</a> terry richardson vinyl chambray. Beard stumptown,
cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's
cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip"
title="Another here too!">whatever keytar</a>, scenester farm-to-table banksy Austin twitter
handle freegan cred raw denim single-origin coffee viral.
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
<script>
// If you want to use tooltips in your project, we suggest initializing them globally
// instead of a "per-page" level.
document.addEventListener('DOMContentLoaded', function () {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
}, false);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>403 - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/pages/error.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="error">
<div class="error-page container">
<div class="col-md-8 col-12 offset-md-2">
<div class="text-center">
<img class="img-error" src="assets/images/samples/error-403.svg" alt="Not Found">
<h1 class="error-title">Forbidden</h1>
<p class="fs-5 text-gray-600">You are unauthorized to see this page.</p>
<a href="index.html" class="btn btn-lg btn-outline-primary mt-3">Go Home</a>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/pages/error.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="error">
<div class="error-page container">
<div class="col-md-8 col-12 offset-md-2">
<div class="text-center">
<img class="img-error" src="assets/images/samples/error-404.svg" alt="Not Found">
<h1 class="error-title">NOT FOUND</h1>
<p class='fs-5 text-gray-600'>The page you are looking not found.</p>
<a href="index.html" class="btn btn-lg btn-outline-primary mt-3">Go Home</a>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>405 - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/pages/error.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="error">
<div class="error-page container">
<div class="col-md-8 col-12 offset-md-2">
<div class="text-center">
<img class="img-error" src="assets/images/samples/error-500.svg" alt="Not Found">
<h1 class="error-title">System Error</h1>
<p class="fs-5 text-gray-600">The website is currently unaivailable. Try again later or contact the
developer.</p>
<a href="index.html" class="btn btn-lg btn-outline-primary mt-3">Go Home</a>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Avatar - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item active">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Avatar</h3>
<p class="text-subtitle text-muted">A container to show avatar images or initials </p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Avatar</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="card">
<div class="card-header">
<h4 class="card-title">Default Avatar</h4>
</div>
<div class="card-body">
<p>Wrap your content with <code>.avatar</code> class and wrap your text in <code>.avatar</code>-content
to create a avatar.You have to use inline
attributes to set height width of image in default avatar.</p>
<div class="avatar bg-primary me-3">
<span class="avatar-content"><i class="bi bi-envelope"></i></span>
</div>
<div class="avatar bg-warning me-3">
<span class="avatar-content">AS</span>
</div>
<div class="avatar bg-warning me-3">
<img src="assets/images/faces/1.jpg" alt="" srcset="">
</div>
</div>
</div>
</section>
<section class="section">
<div class="card">
<div class="card-header">
<h4 class="card-title">Avatar Sizes</h4>
</div>
<div class="card-body">
<p>use class <code>.avatar-{sm|lg|xl}</code> with <code>.avatar</code> to modify size of your avatar.
</p>
<div class="avatar avatar-sm bg-primary me-3">
<span class="avatar-content"><i class="bi bi-envelope"></i></span>
</div>
<div class="avatar bg-warning me-3">
<span class="avatar-content">AS</span>
</div>
<div class="avatar me-3">
<img src="assets/images/faces/1.jpg" alt="" srcset="">
</div>
<div class="avatar avatar-lg me-3">
<img src="assets/images/faces/2.jpg" alt="" srcset="">
</div>
<div class="avatar avatar-xl me-3">
<img src="assets/images/faces/3.jpg" alt="" srcset="">
</div>
</div>
</div>
</section>
<section class="section">
<div class="card">
<div class="card-header">
<h4 class="card-title">Avatar Status</h4>
</div>
<div class="card-body">
<p>use class <code>.avatar-status</code> and <code>.bg-{color}</code> after <code>.avatar-content</code>
</p>
<div class="avatar bg-warning me-3">
<span class="avatar-content">AS</span>
<span class="avatar-status bg-success"></span>
</div>
<div class="avatar bg-warning me-3">
<img src="assets/images/faces/1.jpg" alt="" srcset="">
<span class="avatar-status bg-danger"></span>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment