bert.hausmans/band-management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initial commit - Band Management application

Browse Source
This commit is contained in:
Bert Hausmans
2026-01-06 03:11:46 +01:00
commit 34e12e00b3
24543 changed files with 3991790 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

814
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_dropdowns.html Normal file
View File

@@ -0,0 +1,814 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Dropdowns - UI elements{% endblock %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/js/dropdown-hover.js' %}"></script>
{% endblock vendor_js %}
{% block content %}
<div class="card mb-6" id="btn-dropdown-demo">
<h5 class="card-header">Dropdowns</h5>
<!-- Basic Dropdowns -->
<div class="card-body">
<small class="fw-medium">Basic</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item disabled" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!--/ Basic Dropdowns -->
<hr class="m-0" />
<!-- Label Dropdowns -->
<div class="card-body">
<small class="fw-medium">Label</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<button type="button" class="btn btn-label-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-label-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-label-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-label-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-label-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-label-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!--/ Label Dropdowns -->
<hr class="m-0" />
<!-- Outline Dropdowns -->
<div class="card-body">
<small class="fw-medium">Outline</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!--/ Basic Dropdowns -->
<hr class="m-0" />
<!-- Split Dropdowns -->
<div class="card-body">
<small class="fw-medium">Split</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<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-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<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-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<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-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<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-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<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-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<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-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!--/ Split Dropdowns -->
<hr class="m-0" />
<div class="card-body">
<div class="row gy-3">
<!-- Hidden Arrow Dropdowns -->
<div class="col-lg-3 col-sm-6 col-12">
<small class="fw-medium">Hidden arrow</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="false">Hidden arrow</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!--/ Hidden Arrow Dropdowns -->
<!-- Open Dropdown on hover -->
<div class="col-lg-3 col-sm-6 col-12">
<small class="fw-medium">On Hover</small>
<div class="demo-inline-spacing">
<div class="btn-group" id="hover-dropdown-demo">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-trigger="hover">Hover</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!--/ Open Dropdown on hover -->
<!-- Dropdown with icon -->
<div class="col-lg-3 col-sm-6 col-12">
<small class="fw-medium">With Icon</small>
<div class="demo-inline-spacing">
<div class="btn-group" id="dropdown-icon-demo">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-menu-2 icon-xs me-1"></i> With Icon</button>
<ul class="dropdown-menu">
<li>
<a href="javascript:void(0);" class="dropdown-item d-flex align-items-center"><i class="icon-base ti tabler-chevron-right scaleX-n1-rtl"></i>Action</a>
</li>
<li>
<a href="javascript:void(0);" class="dropdown-item d-flex align-items-center"><i class="icon-base ti tabler-chevron-right scaleX-n1-rtl"></i>Another action</a>
</li>
<li>
<a href="javascript:void(0);" class="dropdown-item d-flex align-items-center"><i class="icon-base ti tabler-chevron-right scaleX-n1-rtl"></i>Something else here</a>
</li>
<li>
<hr class="dropdown-divider" />
</li>
<li>
<a href="javascript:void(0);" class="dropdown-item d-flex align-items-center"><i class="icon-base ti tabler-chevron-right scaleX-n1-rtl"></i>Separated link</a>
</li>
</ul>
</div>
</div>
</div>
<!--/ Dropdown with icon -->
<!-- Icon Dropdown -->
<div class="col-lg-3 col-sm-6 col-12">
<small class="fw-medium">Icon Dropdown</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<button type="button" class="btn btn-primary btn-icon rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!--/ Icon Dropdown -->
</div>
</div>
</div>
<!-- Dropdown Variations -->
<div class="card" id="dropdown-variation-demo">
<h5 class="card-header">Dropdown Variations</h5>
<!-- Dropdown Menu Alignment -->
<div class="card-body">
<small class="fw-medium">Menu Alignment</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle overflow-hidden d-sm-inline-flex d-block text-truncate" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">End-aligned dropdown menu</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle overflow-hidden d-sm-inline-flex d-block text-truncate" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false">Start-aligned but end-aligned when lg screen</button>
<ul class="dropdown-menu dropdown-menu-start dropdown-menu-lg-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle overflow-hidden d-sm-inline-flex d-block text-truncate" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false">End-aligned but start-aligned when lg screen</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
</div>
</div>
<!--/ Dropdown Menu Alignment -->
<hr class="m-0" />
<!-- Dropdown Sizes -->
<div class="card-body">
<small class="fw-medium">Sizes</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<button class="btn btn-primary btn-xl dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Extra large button</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Large button</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Small button</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary btn-xs dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Extra small button</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!--/ Dropdown Sizes -->
<hr class="m-0" />
<div class="card-body">
<div class="row gy-3">
<!-- Dropdown Directions -->
<div class="col-xl-6">
<small class="fw-medium">Directions</small>
<div class="row">
<div class="col-md-6">
<div class="demo-inline-spacing">
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="demo-inline-spacing">
<div class="btn-group dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="demo-inline-spacing">
<div class="btn-group dropend">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropend</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="demo-inline-spacing">
<div class="btn-group dropstart">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropstart</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Centered Dropdown -->
<div class="col-xl-6">
<small class="fw-medium">Centered</small>
<div class="demo-inline-spacing">
<div class="dropdown-center">
<button class="btn btn-primary dropdown-toggle w-100" type="button" data-bs-toggle="dropdown" aria-expanded="false">Directions centered dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Action two</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Action three</a></li>
</ul>
</div>
</div>
<div class="demo-inline-spacing">
<div class="dropup-center dropup">
<button class="btn btn-primary dropdown-toggle w-100" type="button" data-bs-toggle="dropdown" aria-expanded="false">Directions centered dropup</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Action two</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Action three</a></li>
</ul>
</div>
</div>
</div>
<!--/ Dropdown Directions -->
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<div class="row gy-3">
<!-- Dropdown menu content -->
<div class="col-xl-12">
<small class="fw-medium">Menu Content</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown Header</button>
<ul class="dropdown-menu">
<li>
<h6 class="dropdown-header text-uppercase">Dropdown header</h6>
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Divider</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Text</button>
<div class="dropdown-menu">
<div class="px-4 py-2 text-body-secondary">
<p>Some example text that's free-flowing within the dropdown menu.</p>
<p class="mb-0">And this is more example text.</p>
</div>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Forms</button>
<div class="dropdown-menu dropdown-menu-end w-px-300">
<form class="p-6" onsubmit="return false">
<div class="mb-4">
<label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com" />
</div>
<div class="mb-4">
<label for="exampleDropdownFormPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password" />
</div>
<div class="mb-4">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck" />
<label class="form-check-label" for="dropdownCheck"> Remember me </label>
</div>
</div>
<button type="button" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">New around here? Sign up</a>
<a class="dropdown-item" href="javascript:void(0)">Forgot password?</a>
</div>
</div>
</div>
</div>
<!--/ Dropdown menu content -->
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<div class="row gy-3">
<!-- Dropdown options -->
<div class="col-xl-6">
<small class="fw-medium">Options : Use <code>data-bs-offset</code> or <code>data-bs-reference</code> to change the location of the dropdown.</small>
<div class="demo-inline-spacing">
<div class="btn-group me-1">
<button type="button" class="btn btn-primary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">Offset</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Reference</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!--/ Dropdown options -->
<!-- Auto close behavior -->
<div class="col-xl-6">
<small class="fw-medium">Auto close behavior</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">Default</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">Clickable outside</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Clickable inside</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">Manual close</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
</ul>
</div>
</div>
</div>
<!--/ Auto close behavior -->
</div>
</div>
</div>
<!--/ Dropdown Variations -->
{% endblock %}