931 lines
45 KiB
HTML
931 lines
45 KiB
HTML
<!DOCTYPE html>
|
||
<!--
|
||
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
|
||
Author: NobleUI
|
||
Website: https://www.nobleui.com
|
||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||
Contact: nobleui123@gmail.com
|
||
Purchase: https://1.envato.market/nobleui_admin
|
||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||
-->
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
|
||
<meta name="author" content="NobleUI">
|
||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
||
|
||
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
|
||
|
||
<!-- Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||
<!-- End fonts -->
|
||
|
||
<!-- core:css -->
|
||
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
|
||
<!-- endinject -->
|
||
|
||
<!-- Plugin css for this page -->
|
||
<link rel="stylesheet" href="../../../assets/vendors/prismjs/themes/prism.css">
|
||
<!-- End plugin css for this page -->
|
||
|
||
<!-- inject:css -->
|
||
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
|
||
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
||
<!-- endinject -->
|
||
|
||
<!-- Layout styles -->
|
||
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
|
||
<!-- End layout styles -->
|
||
|
||
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
|
||
</head>
|
||
<body>
|
||
<div class="main-wrapper">
|
||
|
||
<!-- partial:../../partials/_sidebar.html -->
|
||
<nav class="sidebar">
|
||
<div class="sidebar-header">
|
||
<a href="#" class="sidebar-brand">
|
||
Noble<span>UI</span>
|
||
</a>
|
||
<div class="sidebar-toggler not-active">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
</div>
|
||
<div class="sidebar-body">
|
||
<ul class="nav">
|
||
<li class="nav-item nav-category">Main</li>
|
||
<li class="nav-item">
|
||
<a href="../../dashboard.html" class="nav-link">
|
||
<i class="link-icon" data-feather="box"></i>
|
||
<span class="link-title">Dashboard</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item nav-category">web apps</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
|
||
<i class="link-icon" data-feather="mail"></i>
|
||
<span class="link-title">Email</span>
|
||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||
</a>
|
||
<div class="collapse" id="emails">
|
||
<ul class="nav sub-menu">
|
||
<li class="nav-item">
|
||
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/email/read.html" class="nav-link">Read</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/apps/chat.html" class="nav-link">
|
||
<i class="link-icon" data-feather="message-square"></i>
|
||
<span class="link-title">Chat</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/apps/calendar.html" class="nav-link">
|
||
<i class="link-icon" data-feather="calendar"></i>
|
||
<span class="link-title">Calendar</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item nav-category">Components</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
|
||
<i class="link-icon" data-feather="feather"></i>
|
||
<span class="link-title">UI Kit</span>
|
||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||
</a>
|
||
<div class="collapse" id="uiComponents">
|
||
<ul class="nav sub-menu">
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
|
||
<i class="link-icon" data-feather="anchor"></i>
|
||
<span class="link-title">Advanced UI</span>
|
||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||
</a>
|
||
<div class="collapse" id="advancedUI">
|
||
<ul class="nav sub-menu">
|
||
<li class="nav-item">
|
||
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
|
||
<i class="link-icon" data-feather="inbox"></i>
|
||
<span class="link-title">Forms</span>
|
||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||
</a>
|
||
<div class="collapse" id="forms">
|
||
<ul class="nav sub-menu">
|
||
<li class="nav-item">
|
||
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
|
||
<i class="link-icon" data-feather="pie-chart"></i>
|
||
<span class="link-title">Charts</span>
|
||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||
</a>
|
||
<div class="collapse" id="charts">
|
||
<ul class="nav sub-menu">
|
||
<li class="nav-item">
|
||
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
|
||
<i class="link-icon" data-feather="layout"></i>
|
||
<span class="link-title">Table</span>
|
||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||
</a>
|
||
<div class="collapse" id="tables">
|
||
<ul class="nav sub-menu">
|
||
<li class="nav-item">
|
||
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
|
||
<i class="link-icon" data-feather="smile"></i>
|
||
<span class="link-title">Icons</span>
|
||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||
</a>
|
||
<div class="collapse" id="icons">
|
||
<ul class="nav sub-menu">
|
||
<li class="nav-item">
|
||
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item nav-category">Pages</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
|
||
<i class="link-icon" data-feather="book"></i>
|
||
<span class="link-title">Special pages</span>
|
||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||
</a>
|
||
<div class="collapse" id="general-pages">
|
||
<ul class="nav sub-menu">
|
||
<li class="nav-item">
|
||
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
|
||
<i class="link-icon" data-feather="unlock"></i>
|
||
<span class="link-title">Authentication</span>
|
||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||
</a>
|
||
<div class="collapse" id="authPages">
|
||
<ul class="nav sub-menu">
|
||
<li class="nav-item">
|
||
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
|
||
<i class="link-icon" data-feather="cloud-off"></i>
|
||
<span class="link-title">Error</span>
|
||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||
</a>
|
||
<div class="collapse" id="errorPages">
|
||
<ul class="nav sub-menu">
|
||
<li class="nav-item">
|
||
<a href="../../pages/error/404.html" class="nav-link">404</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="../../pages/error/500.html" class="nav-link">500</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item nav-category">Docs</li>
|
||
<li class="nav-item">
|
||
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
|
||
<i class="link-icon" data-feather="hash"></i>
|
||
<span class="link-title">Documentation</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
<nav class="settings-sidebar">
|
||
<div class="sidebar-body">
|
||
<a href="#" class="settings-sidebar-toggler">
|
||
<i data-feather="settings"></i>
|
||
</a>
|
||
<div class="theme-wrapper">
|
||
<h6 class="text-muted mb-2">Light Theme:</h6>
|
||
<a class="theme-item" href="../../../demo1/dashboard.html">
|
||
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
|
||
</a>
|
||
<h6 class="text-muted mb-2">Dark Theme:</h6>
|
||
<a class="theme-item active" href="../../../demo2/dashboard.html">
|
||
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<!-- partial -->
|
||
|
||
<div class="page-wrapper">
|
||
|
||
<!-- partial:../../partials/_navbar.html -->
|
||
<nav class="navbar">
|
||
<a href="#" class="sidebar-toggler">
|
||
<i data-feather="menu"></i>
|
||
</a>
|
||
<div class="navbar-content">
|
||
<form class="search-form">
|
||
<div class="input-group">
|
||
<div class="input-group-text">
|
||
<i data-feather="search"></i>
|
||
</div>
|
||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||
</div>
|
||
</form>
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||
</a>
|
||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
|
||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
|
||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
|
||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
|
||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i data-feather="grid"></i>
|
||
</a>
|
||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||
<p class="mb-0 fw-bold">Web Apps</p>
|
||
<a href="javascript:;" class="text-muted">Edit</a>
|
||
</div>
|
||
<div class="row g-0 p-1">
|
||
<div class="col-3 text-center">
|
||
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||
</div>
|
||
<div class="col-3 text-center">
|
||
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||
</div>
|
||
<div class="col-3 text-center">
|
||
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||
</div>
|
||
<div class="col-3 text-center">
|
||
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||
</div>
|
||
</div>
|
||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||
<a href="javascript:;">View all</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i data-feather="mail"></i>
|
||
</a>
|
||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||
<p>9 New Messages</p>
|
||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||
</div>
|
||
<div class="p-1">
|
||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||
<div class="me-3">
|
||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||
</div>
|
||
<div class="d-flex justify-content-between flex-grow-1">
|
||
<div class="me-4">
|
||
<p>Leonardo Payne</p>
|
||
<p class="tx-12 text-muted">Project status</p>
|
||
</div>
|
||
<p class="tx-12 text-muted">2 min ago</p>
|
||
</div>
|
||
</a>
|
||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||
<div class="me-3">
|
||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||
</div>
|
||
<div class="d-flex justify-content-between flex-grow-1">
|
||
<div class="me-4">
|
||
<p>Carl Henson</p>
|
||
<p class="tx-12 text-muted">Client meeting</p>
|
||
</div>
|
||
<p class="tx-12 text-muted">30 min ago</p>
|
||
</div>
|
||
</a>
|
||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||
<div class="me-3">
|
||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||
</div>
|
||
<div class="d-flex justify-content-between flex-grow-1">
|
||
<div class="me-4">
|
||
<p>Jensen Combs</p>
|
||
<p class="tx-12 text-muted">Project updates</p>
|
||
</div>
|
||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||
</div>
|
||
</a>
|
||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||
<div class="me-3">
|
||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||
</div>
|
||
<div class="d-flex justify-content-between flex-grow-1">
|
||
<div class="me-4">
|
||
<p>Amiah Burton</p>
|
||
<p class="tx-12 text-muted">Project deatline</p>
|
||
</div>
|
||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||
</div>
|
||
</a>
|
||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||
<div class="me-3">
|
||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||
</div>
|
||
<div class="d-flex justify-content-between flex-grow-1">
|
||
<div class="me-4">
|
||
<p>Yaretzi Mayo</p>
|
||
<p class="tx-12 text-muted">New record</p>
|
||
</div>
|
||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||
<a href="javascript:;">View all</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i data-feather="bell"></i>
|
||
<div class="indicator">
|
||
<div class="circle"></div>
|
||
</div>
|
||
</a>
|
||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||
<p>6 New Notifications</p>
|
||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||
</div>
|
||
<div class="p-1">
|
||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||
</div>
|
||
<div class="flex-grow-1 me-2">
|
||
<p>New Order Recieved</p>
|
||
<p class="tx-12 text-muted">30 min ago</p>
|
||
</div>
|
||
</a>
|
||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||
</div>
|
||
<div class="flex-grow-1 me-2">
|
||
<p>Server Limit Reached!</p>
|
||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||
</div>
|
||
</a>
|
||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||
</div>
|
||
<div class="flex-grow-1 me-2">
|
||
<p>New customer registered</p>
|
||
<p class="tx-12 text-muted">2 sec ago</p>
|
||
</div>
|
||
</a>
|
||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||
</div>
|
||
<div class="flex-grow-1 me-2">
|
||
<p>Apps are ready for update</p>
|
||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||
</div>
|
||
</a>
|
||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||
<i class="icon-sm text-white" data-feather="download"></i>
|
||
</div>
|
||
<div class="flex-grow-1 me-2">
|
||
<p>Download completed</p>
|
||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||
<a href="javascript:;">View all</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
|
||
</a>
|
||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||
<div class="mb-3">
|
||
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
|
||
</div>
|
||
<div class="text-center">
|
||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||
</div>
|
||
</div>
|
||
<ul class="list-unstyled p-1">
|
||
<li class="dropdown-item py-2">
|
||
<a href="../../pages/general/profile.html" class="text-body ms-0">
|
||
<i class="me-2 icon-md" data-feather="user"></i>
|
||
<span>Profile</span>
|
||
</a>
|
||
</li>
|
||
<li class="dropdown-item py-2">
|
||
<a href="javascript:;" class="text-body ms-0">
|
||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||
<span>Edit Profile</span>
|
||
</a>
|
||
</li>
|
||
<li class="dropdown-item py-2">
|
||
<a href="javascript:;" class="text-body ms-0">
|
||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||
<span>Switch User</span>
|
||
</a>
|
||
</li>
|
||
<li class="dropdown-item py-2">
|
||
<a href="javascript:;" class="text-body ms-0">
|
||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||
<span>Log Out</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
<!-- partial -->
|
||
|
||
<div class="page-content">
|
||
<div class="row">
|
||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||
<h1 class="page-title">List Group</h1>
|
||
<p class="lead">List groups are a flexible and powerful component for displaying a series of content. Read the <a href="https://getbootstrap.com/docs/5.1/components/list-group/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||
<hr>
|
||
<h4 id="default">Basic example</h4>
|
||
<p class="mb-3">The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.</p>
|
||
<div class="example">
|
||
<div class="row">
|
||
<div class="col-12 col-md-6">
|
||
<ul class="list-group">
|
||
<li class="list-group-item">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">Vestibulum at eros</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<figure class="highlight" id="Default">
|
||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-group">
|
||
<li class="list-group-item">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">Vestibulum at eros</li>
|
||
</ul></script></code></pre>
|
||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||
</figure>
|
||
|
||
<hr>
|
||
|
||
<h4 id="active-items">Active items</h4>
|
||
<p class="mb-3">Add <code>.active</code> to a <code>.list-group-item</code> to indicate the current active selection.</p>
|
||
<div class="example">
|
||
<div class="row">
|
||
<div class="col-12 col-md-6">
|
||
<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">Vestibulum at eros</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<figure class="highlight" id="activeItems">
|
||
<pre><code class="language-markup"><script type="script/prism-html-markup"><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">Vestibulum at eros</li>
|
||
</ul></script></code></pre>
|
||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#activeItems">copy</button>
|
||
</figure>
|
||
|
||
<hr>
|
||
|
||
<h4 id="disabled-items">Disabled items</h4>
|
||
<p class="mb-3">Add <code>.disabled</code> to a <code>.list-group-item</code> to make it <em>appear</em> disabled. Note that some elements with <code>.disabled</code> will also require custom JavaScript to fully disable their click events (e.g., links).</p>
|
||
<div class="example">
|
||
<div class="row">
|
||
<div class="col-12 col-md-6">
|
||
<ul class="list-group">
|
||
<li class="list-group-item disabled" aria-disabled="true">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">Vestibulum at eros</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<figure class="highlight" id="disabledItems">
|
||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-group">
|
||
<li class="list-group-item disabled" aria-disabled="true">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">Vestibulum at eros</li>
|
||
</ul></script></code></pre>
|
||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#disabledItems">copy</button>
|
||
</figure>
|
||
|
||
<hr>
|
||
|
||
<h4 id="links-buttons">Links and buttons</h4>
|
||
<p class="mb-3">Use <code><a></code>s or <code><button></code>s to create <em>actionable</em> list group items with hover, disabled, and active states by adding <code>.list-group-item-action</code>.</p>
|
||
<div class="example">
|
||
<div class="row">
|
||
<div class="col-12 col-md-6">
|
||
<div class="list-group">
|
||
<a href="javascript:;" class="list-group-item list-group-item-action active">
|
||
Cras justo odio
|
||
</a>
|
||
<a href="javascript:;" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||
<a href="javascript:;" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||
<a href="javascript:;" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
||
<a href="javascript:;" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<figure class="highlight" id="linksButtons">
|
||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="list-group">
|
||
<a href="#" class="list-group-item list-group-item-action active">
|
||
Cras justo odio
|
||
</a>
|
||
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
||
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
|
||
</div></script></code></pre>
|
||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#linksButtons">copy</button>
|
||
</figure>
|
||
|
||
<hr>
|
||
|
||
<h4 id="flush">Flush</h4>
|
||
<p class="mb-3">Add <code>.list-group-flush</code> to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).</p>
|
||
<div class="example">
|
||
<div class="row">
|
||
<div class="col-12 col-md-6">
|
||
<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">Morbi leo risus</li>
|
||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||
<li class="list-group-item">Vestibulum at eros</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<figure class="highlight" id="Flush">
|
||
<pre><code class="language-markup"><script type="script/prism-html-markup"><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">Morbi leo risus</li>
|
||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||
<li class="list-group-item">Vestibulum at eros</li>
|
||
</ul></script></code></pre>
|
||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Flush">copy</button>
|
||
</figure>
|
||
|
||
<hr>
|
||
|
||
<h4 id="with-badges">With badges</h4>
|
||
<p class="mb-3">Add badges to any list group item to show unread counts, activity, and more with the help of some <a href="https://getbootstrap.com/docs/5.1/utilities/flex/" target="_blank">utilities</a>.</p>
|
||
<div class="example">
|
||
<ul class="list-group">
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
A list item
|
||
<span class="badge bg-primary rounded-pill">14</span>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
A second list item
|
||
<span class="badge bg-primary rounded-pill">2</span>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
A third list item
|
||
<span class="badge bg-primary rounded-pill">1</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<figure class="highlight" id="withBadges">
|
||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-group">
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
A list item
|
||
<span class="badge bg-primary rounded-pill">14</span>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
A second list item
|
||
<span class="badge bg-primary rounded-pill">2</span>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
A third list item
|
||
<span class="badge bg-primary rounded-pill">1</span>
|
||
</li>
|
||
</ul></script></code></pre>
|
||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#withBadges">copy</button>
|
||
</figure>
|
||
|
||
<hr>
|
||
|
||
<h4 id="checkboxes-radios">Checkboxes and radios</h4>
|
||
<p class="mb-3">Place Bootstrap’s checkboxes and radios within list group items and customize as needed.</p>
|
||
<div class="example">
|
||
<div class="list-group">
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
First checkbox
|
||
</label>
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
Second checkbox
|
||
</label>
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
Third checkbox
|
||
</label>
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
Fourth checkbox
|
||
</label>
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
Fifth checkbox
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<figure class="highlight" id="checkboxesRadios">
|
||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="list-group">
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
First checkbox
|
||
</label>
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
Second checkbox
|
||
</label>
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
Third checkbox
|
||
</label>
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
Fourth checkbox
|
||
</label>
|
||
<label class="list-group-item">
|
||
<input class="form-check-input me-1" type="checkbox" value="">
|
||
Fifth checkbox
|
||
</label>
|
||
</div></script></code></pre>
|
||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#checkboxesRadios">copy</button>
|
||
</figure>
|
||
|
||
</div>
|
||
<div class="col-xl-2 content-nav-wrapper">
|
||
<ul class="nav content-nav d-flex flex-column">
|
||
<li class="nav-item">
|
||
<a href="#default" class="nav-link">Basic example</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#active-items" class="nav-link">Active items</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#disabled-items" class="nav-link">Disabled items</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#links-buttons" class="nav-link">Linkd and buttons</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#flush" class="nav-link">Flush</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#with-badges" class="nav-link">With badges</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#checkboxes-radios" class="nav-link">Checkboxes radios</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- partial:../../partials/_footer.html -->
|
||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||
</footer>
|
||
<!-- partial -->
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- core:js -->
|
||
<script src="../../../assets/vendors/core/core.js"></script>
|
||
<!-- endinject -->
|
||
|
||
<!-- Plugin js for this page -->
|
||
<script src="../../../assets/vendors/prismjs/prism.js"></script>
|
||
<script src="../../../assets/vendors/clipboard/clipboard.min.js"></script>
|
||
<!-- End plugin js for this page -->
|
||
|
||
<!-- inject:js -->
|
||
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
|
||
<script src="../../../assets/js/template.js"></script>
|
||
<!-- endinject -->
|
||
|
||
<!-- Custom js for this page -->
|
||
<!-- End custom js for this page -->
|
||
|
||
</body>
|
||
</html> |