msmartcomputeUI/dist/pages/ui-features/dropdowns.html
2024-04-22 16:01:31 +05:30

922 lines
56 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Corona Admin</title>
<!-- plugins:css -->
<link rel="stylesheet" href="../../assets/vendors/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="../../assets/vendors/ti-icons/css/themify-icons.css">
<link rel="stylesheet" href="../../assets/vendors/css/vendor.bundle.base.css">
<link rel="stylesheet" href="../../assets/vendors/font-awesome/css/font-awesome.min.css">
<!-- endinject -->
<!-- Plugin css for this page -->
<!-- End Plugin css for this page -->
<!-- inject:css -->
<!-- endinject -->
<!-- Layout styles -->
<link rel="stylesheet" href="../../assets/css/style.css">
<!-- End layout styles -->
<link rel="shortcut icon" href="../../assets/images/favicon.png" />
</head>
<body>
<div class="container-scroller">
<!-- partial:../../partials/_sidebar.html -->
<nav class="sidebar sidebar-offcanvas" id="sidebar">
<div class="sidebar-brand-wrapper d-none d-lg-flex align-items-center justify-content-center fixed-top">
<a class="sidebar-brand brand-logo" href="../../index.html"><img src="../../assets/images/logo.svg" alt="logo" /></a>
<a class="sidebar-brand brand-logo-mini" href="../../index.html"><img src="../../assets/images/logo-mini.svg" alt="logo" /></a>
</div>
<ul class="nav">
<li class="nav-item profile">
<div class="profile-desc">
<div class="profile-pic">
<div class="count-indicator">
<img class="img-xs rounded-circle " src="../../assets/images/faces/face15.jpg" alt="">
<span class="count bg-success"></span>
</div>
<div class="profile-name">
<h5 class="mb-0 font-weight-normal">Henry Klein</h5>
<span>Gold Member</span>
</div>
</div>
<a href="#" id="profile-dropdown" data-bs-toggle="dropdown"><i class="mdi mdi-dots-vertical"></i></a>
<div class="dropdown-menu dropdown-menu-right sidebar-dropdown preview-list" aria-labelledby="profile-dropdown">
<a href="#" class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-dark rounded-circle">
<i class="mdi mdi-cog text-primary"></i>
</div>
</div>
<div class="preview-item-content">
<p class="preview-subject ellipsis mb-1 text-small">Account settings</p>
</div>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-dark rounded-circle">
<i class="mdi mdi-onepassword text-info"></i>
</div>
</div>
<div class="preview-item-content">
<p class="preview-subject ellipsis mb-1 text-small">Change Password</p>
</div>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-dark rounded-circle">
<i class="mdi mdi-calendar-today text-success"></i>
</div>
</div>
<div class="preview-item-content">
<p class="preview-subject ellipsis mb-1 text-small">To-do list</p>
</div>
</a>
</div>
</div>
</li>
<li class="nav-item nav-category">
<span class="nav-link">Navigation</span>
</li>
<li class="nav-item menu-items">
<a class="nav-link" href="../../index.html">
<span class="menu-icon">
<i class="mdi mdi-speedometer"></i>
</span>
<span class="menu-title">Dashboard</span>
</a>
</li>
<li class="nav-item menu-items">
<a class="nav-link" data-bs-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
<span class="menu-icon">
<i class="mdi mdi-laptop"></i>
</span>
<span class="menu-title">Basic UI Elements</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="../../pages/ui-features/buttons.html">Buttons</a></li>
<li class="nav-item"> <a class="nav-link" href="../../pages/ui-features/dropdowns.html">Dropdowns</a></li>
<li class="nav-item"> <a class="nav-link" href="../../pages/ui-features/typography.html">Typography</a></li>
</ul>
</div>
</li>
<li class="nav-item menu-items">
<a class="nav-link" href="../../pages/forms/basic_elements.html">
<span class="menu-icon">
<i class="mdi mdi-playlist-play"></i>
</span>
<span class="menu-title">Form Elements</span>
<i class="menu-arrow"></i>
</a>
</li>
<li class="nav-item menu-items">
<a class="nav-link" href="../../pages/tables/basic-table.html">
<span class="menu-icon">
<i class="mdi mdi-table-large"></i>
</span>
<span class="menu-title">Tables</span>
<i class="menu-arrow"></i>
</a>
</li>
<li class="nav-item menu-items">
<a class="nav-link" href="../../pages/charts/chartjs.html">
<span class="menu-icon">
<i class="mdi mdi-chart-bar"></i>
</span>
<span class="menu-title">Charts</span>
<i class="menu-arrow"></i>
</a>
</li>
<li class="nav-item menu-items">
<a class="nav-link" href="../../pages/icons/font-awesome.html">
<span class="menu-icon">
<i class="mdi mdi-contacts"></i>
</span>
<span class="menu-title">Icons</span>
<i class="menu-arrow"></i>
</a>
</li>
<li class="nav-item menu-items">
<a class="nav-link" data-bs-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
<span class="menu-icon">
<i class="mdi mdi-security"></i>
</span>
<span class="menu-title">User Pages</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="auth">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="../../pages/samples/login.html"> Login </a></li>
<li class="nav-item"> <a class="nav-link" href="../../pages/samples/register.html"> Register </a></li>
<li class="nav-item"> <a class="nav-link" href="../../pages/samples/error-404.html"> 404 </a></li>
<li class="nav-item"> <a class="nav-link" href="../../pages/samples/error-500.html"> 505 </a></li>
<li class="nav-item"> <a class="nav-link" href="../../pages/samples/blank-page.html"> Blank Page </a></li>
</ul>
</div>
</li>
<li class="nav-item menu-items">
<a class="nav-link" href="../../docs/documentation.html">
<span class="menu-icon">
<i class="mdi mdi-file-document"></i>
</span>
<span class="menu-title">Documentation</span>
</a>
</li>
</ul>
</nav>
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<!-- partial:../../partials/_navbar.html -->
<nav class="navbar p-0 fixed-top d-flex flex-row">
<div class="navbar-brand-wrapper d-flex d-lg-none align-items-center justify-content-center">
<a class="navbar-brand brand-logo-mini" href="../../index.html"><img src="../../../assets/images/logo-mini.svg" alt="logo" /></a>
</div>
<div class="navbar-menu-wrapper flex-grow d-flex align-items-stretch">
<button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
<span class="mdi mdi-menu"></span>
</button>
<ul class="navbar-nav w-100">
<li class="nav-item w-100">
<form class="nav-link mt-2 mt-md-0 d-none d-lg-flex search">
<input type="text" class="form-control" placeholder="Search products">
</form>
</li>
</ul>
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item dropdown d-none d-lg-block">
<a class="nav-link btn btn-success create-new-button" id="createbuttonDropdown" data-bs-toggle="dropdown" aria-expanded="false" href="#">+ Create New Project</a>
<div class="dropdown-menu dropdown-menu-end navbar-dropdown preview-list" aria-labelledby="createbuttonDropdown">
<h6 class="p-3 mb-0">Projects</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-dark rounded-circle">
<i class="mdi mdi-file-outline text-primary"></i>
</div>
</div>
<div class="preview-item-content">
<p class="preview-subject ellipsis mb-1">Software Development</p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-dark rounded-circle">
<i class="mdi mdi-web text-info"></i>
</div>
</div>
<div class="preview-item-content">
<p class="preview-subject ellipsis mb-1">UI Development</p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-dark rounded-circle">
<i class="mdi mdi-layers text-danger"></i>
</div>
</div>
<div class="preview-item-content">
<p class="preview-subject ellipsis mb-1">Software Testing</p>
</div>
</a>
<div class="dropdown-divider"></div>
<p class="p-3 mb-0 text-center">See all projects</p>
</div>
</li>
<li class="nav-item nav-settings d-none d-lg-block">
<a class="nav-link" href="#">
<i class="mdi mdi-view-grid"></i>
</a>
</li>
<li class="nav-item dropdown border-left">
<a class="nav-link count-indicator dropdown-toggle" id="messageDropdown" href="#" data-bs-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-email"></i>
<span class="count bg-success"></span>
</a>
<div class="dropdown-menu dropdown-menu-end navbar-dropdown preview-list" aria-labelledby="messageDropdown">
<h6 class="p-3 mb-0">Messages</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../../assets/images/faces/face4.jpg" alt="image" class="rounded-circle profile-pic">
</div>
<div class="preview-item-content">
<p class="preview-subject ellipsis mb-1">Mark send you a message</p>
<p class="text-muted mb-0"> 1 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../../assets/images/faces/face2.jpg" alt="image" class="rounded-circle profile-pic">
</div>
<div class="preview-item-content">
<p class="preview-subject ellipsis mb-1">Cregh send you a message</p>
<p class="text-muted mb-0"> 15 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<img src="../../../assets/images/faces/face3.jpg" alt="image" class="rounded-circle profile-pic">
</div>
<div class="preview-item-content">
<p class="preview-subject ellipsis mb-1">Profile picture updated</p>
<p class="text-muted mb-0"> 18 Minutes ago </p>
</div>
</a>
<div class="dropdown-divider"></div>
<p class="p-3 mb-0 text-center">4 new messages</p>
</div>
</li>
<li class="nav-item dropdown border-left">
<a class="nav-link count-indicator dropdown-toggle" id="notificationDropdown" href="#" data-bs-toggle="dropdown">
<i class="mdi mdi-bell"></i>
<span class="count bg-danger"></span>
</a>
<div class="dropdown-menu dropdown-menu-end navbar-dropdown preview-list" aria-labelledby="notificationDropdown">
<h6 class="p-3 mb-0">Notifications</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-dark rounded-circle">
<i class="mdi mdi-calendar text-success"></i>
</div>
</div>
<div class="preview-item-content">
<p class="preview-subject mb-1">Event today</p>
<p class="text-muted ellipsis mb-0"> Just a reminder that you have an event today </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-dark rounded-circle">
<i class="mdi mdi-cog text-danger"></i>
</div>
</div>
<div class="preview-item-content">
<p class="preview-subject mb-1">Settings</p>
<p class="text-muted ellipsis mb-0"> Update dashboard </p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-dark rounded-circle">
<i class="mdi mdi-link-variant text-warning"></i>
</div>
</div>
<div class="preview-item-content">
<p class="preview-subject mb-1">Launch Admin</p>
<p class="text-muted ellipsis mb-0"> New admin wow! </p>
</div>
</a>
<div class="dropdown-divider"></div>
<p class="p-3 mb-0 text-center">See all notifications</p>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" id="profileDropdown" href="#" data-bs-toggle="dropdown">
<div class="navbar-profile">
<img class="img-xs rounded-circle" src="../../../assets/images/faces/face15.jpg" alt="">
<p class="mb-0 d-none d-sm-block navbar-profile-name">Henry Klein</p>
<i class="mdi mdi-menu-down d-none d-sm-block"></i>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end navbar-dropdown preview-list" aria-labelledby="profileDropdown">
<h6 class="p-3 mb-0">Profile</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-dark rounded-circle">
<i class="mdi mdi-cog text-success"></i>
</div>
</div>
<div class="preview-item-content">
<p class="preview-subject mb-1">Settings</p>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-dark rounded-circle">
<i class="mdi mdi-logout text-danger"></i>
</div>
</div>
<div class="preview-item-content">
<p class="preview-subject mb-1">Log out</p>
</div>
</a>
<div class="dropdown-divider"></div>
<p class="p-3 mb-0 text-center">Advanced settings</p>
</div>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
<span class="mdi mdi-format-line-spacing"></span>
</button>
</div>
</nav>
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="page-header">
<h3 class="page-title"> Dropdowns </h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">UI Elements</a></li>
<li class="breadcrumb-item active" aria-current="page">Dropdowns</li>
</ol>
</nav>
</div>
<div class="row">
<div class="col-lg-12 grid-margin">
<div class="card">
<div class="card-body">
<h4 class="card-title">Basic dropdown</h4>
<p class="card-description"> Wrap the dropdowns toggle (your button or link) and the dropdown menu within <code>.dropdown</code>
</p>
<div class="template-demo">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<h6 class="dropdown-header">Settings</h6>
<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 class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<h6 class="dropdown-header">Settings</h6>
<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 class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
<h6 class="dropdown-header">Settings</h6>
<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 class="dropdown">
<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButton4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton4">
<h6 class="dropdown-header">Settings</h6>
<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 class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton5" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton5">
<h6 class="dropdown-header">Settings</h6>
<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 class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton6" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton6">
<h6 class="dropdown-header">Settings</h6>
<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 class="card-body">
<h4 class="card-title">Dropdown outline</h4>
<p class="card-description"> Add class <code>.btn-outline-{color}</code> to the button inside <code>.dropdown</code>
</p>
<div class="template-demo">
<div class="dropdown">
<button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuOutlineButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuOutlineButton1">
<h6 class="dropdown-header">Settings</h6>
<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 class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuOutlineButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuOutlineButton2">
<h6 class="dropdown-header">Settings</h6>
<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 class="dropdown">
<button class="btn btn-outline-danger dropdown-toggle" type="button" id="dropdownMenuOutlineButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuOutlineButton3">
<h6 class="dropdown-header">Settings</h6>
<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 class="dropdown">
<button class="btn btn-outline-warning dropdown-toggle" type="button" id="dropdownMenuOutlineButton4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuOutlineButton4">
<h6 class="dropdown-header">Settings</h6>
<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 class="dropdown">
<button class="btn btn-outline-success dropdown-toggle" type="button" id="dropdownMenuOutlineButton5" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuOutlineButton5">
<h6 class="dropdown-header">Settings</h6>
<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 class="dropdown">
<button class="btn btn-outline-info dropdown-toggle" type="button" id="dropdownMenuOutlineButton6" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuOutlineButton6">
<h6 class="dropdown-header">Settings</h6>
<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 class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Split button dropdowns</h4>
<p class="card-description"> Wrap two buttons in <code>.btn-group</code> and add <code>.dropdown-toggle-split</code> to the toggling button </p>
<div class="template-demo">
<div class="btn-group">
<button type="button" class="btn btn-primary">Dropdown</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="dropdownMenuSplitButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButton1">
<h6 class="dropdown-header">Settings</h6>
<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 class="btn-group">
<button type="button" class="btn btn-danger">Dropdown</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" id="dropdownMenuSplitButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButton2">
<h6 class="dropdown-header">Settings</h6>
<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 class="btn-group">
<button type="button" class="btn btn-success">Dropdown</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" id="dropdownMenuSplitButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButton3">
<h6 class="dropdown-header">Settings</h6>
<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 class="btn-group">
<button type="button" class="btn btn-secondary">Dropdown</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuSplitButton4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButton4">
<h6 class="dropdown-header">Settings</h6>
<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 class="btn-group">
<button type="button" class="btn btn-info">Dropdown</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" id="dropdownMenuSplitButton5" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButton5">
<h6 class="dropdown-header">Settings</h6>
<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 class="btn-group">
<button type="button" class="btn btn-warning">Dropdown</button>
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" id="dropdownMenuSplitButton6" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButton6">
<h6 class="dropdown-header">Settings</h6>
<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 class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Icon dropdowns</h4>
<p class="card-description"> Add icon tags instead of text </p>
<div class="row">
<div class="col-12">
<div class="template-demo d-flex justify-content-between">
<div class="dropdown">
<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuIconButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-earth"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuIconButton1">
<h6 class="dropdown-header">Settings</h6>
<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 class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuIconButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-trophy-outline"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuIconButton2">
<h6 class="dropdown-header">Settings</h6>
<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 class="dropdown">
<button type="button" class="btn btn-outline-info dropdown-toggle" id="dropdownMenuIconButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-clock"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuIconButton3">
<h6 class="dropdown-header">Settings</h6>
<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 class="row">
<div class="col-12">
<div class="template-demo d-flex justify-content-between">
<div class="dropdown">
<button type="button" class="btn btn-success dropdown-toggle" id="dropdownMenuIconButton4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-heart"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuIconButton4">
<h6 class="dropdown-header">Settings</h6>
<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 class="dropdown">
<button type="button" class="btn btn-warning dropdown-toggle" id="dropdownMenuIconButton5" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-logout"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuIconButton5">
<h6 class="dropdown-header">Settings</h6>
<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 class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuIconButton6" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-security"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuIconButton6">
<h6 class="dropdown-header">Settings</h6>
<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 class="row">
<div class="col-12">
<div class="template-demo d-flex justify-content-between">
<div class="dropdown">
<button type="button" class="btn btn-dark dropdown-toggle" id="dropdownMenuIconButton7" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-account"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuIconButton7">
<h6 class="dropdown-header">Settings</h6>
<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 class="dropdown">
<button type="button" class="btn btn-info dropdown-toggle" id="dropdownMenuIconButton8" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-bell"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuIconButton8">
<h6 class="dropdown-header">Settings</h6>
<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 class="dropdown">
<button type="button" class="btn btn-success dropdown-toggle" id="dropdownMenuIconButton7" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-account"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuIconButton9">
<h6 class="dropdown-header">Settings</h6>
<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>
</div>
<div class="col-lg-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Dropup variation</h4>
<p class="card-description"> Add class <code>.dropup</code>
</p>
<div class="template-demo">
<div class="btn-group dropup">
<button type="button" class="btn btn-primary">Dropdown</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="dropupMenuSplitButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu" aria-labelledby="dropupMenuSplitButton1">
<h6 class="dropdown-header">Settings</h6>
<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 class="btn-group dropup">
<button type="button" class="btn btn-danger">Dropdown</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" id="dropupMenuSplitButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu" aria-labelledby="dropupMenuSplitButton2">
<h6 class="dropdown-header">Settings</h6>
<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 class="btn-group dropup">
<button type="button" class="btn btn-success">Dropdown</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" id="dropupMenuSplitButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu" aria-labelledby="dropupMenuSplitButton3">
<h6 class="dropdown-header">Settings</h6>
<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 class="btn-group dropup">
<button type="button" class="btn btn-secondary">Dropdown</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropupMenuSplitButton4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu" aria-labelledby="dropupMenuSplitButton4">
<h6 class="dropdown-header">Settings</h6>
<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 class="btn-group dropup">
<button type="button" class="btn btn-info">Dropdown</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" id="dropupMenuSplitButton5" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu" aria-labelledby="dropupMenuSplitButton5">
<h6 class="dropdown-header">Settings</h6>
<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 class="btn-group dropup">
<button type="button" class="btn btn-warning">Dropdown</button>
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" id="dropupMenuSplitButton6" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu" aria-labelledby="dropupMenuSplitButton6">
<h6 class="dropdown-header">Settings</h6>
<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 class="col-lg-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Dropdown sizes</h4>
<p class="card-description"> Add class <code>.btn-{size}</code> to dropdown buttons </p>
<div class="template-demo mt-5">
<div class="dropdown">
<button class="btn btn-danger btn-lg dropdown-toggle" type="button" id="dropdownMenuSizeButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuSizeButton1">
<h6 class="dropdown-header">Settings</h6>
<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 class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuSizeButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuSizeButton2">
<h6 class="dropdown-header">Settings</h6>
<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 class="dropdown">
<button class="btn btn-danger btn-sm dropdown-toggle" type="button" id="dropdownMenuSizeButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuSizeButton3">
<h6 class="dropdown-header">Settings</h6>
<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>
</div>
<!-- content-wrapper ends -->
<!-- partial:../../partials/_footer.html -->
<footer class="footer">
<div class="d-sm-flex justify-content-center justify-content-sm-between">
<span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © 2024 <a href="https://www.bootstrapdash.com/" target="_blank">BootstrapDash</a>. All rights reserved.</span>
<span class="text-muted float-none float-sm-end d-block mt-1 mt-sm-0 text-center"> <span class="text-muted float-none float-sm-end d-block mt-1 mt-sm-0 text-center">Hand-crafted & made with <i class="mdi mdi-heart text-danger"></i></span> <i class="mdi mdi-heart text-danger"></i></span>
</div>
</footer>
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="../../assets/vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="../../assets/js/off-canvas.js"></script>
<script src="../../assets/js/misc.js"></script>
<script src="../../assets/js/settings.js"></script>
<script src="../../assets/js/todolist.js"></script>
<!-- endinject -->
</body>
</html>