Dropdown Color Variant
<div class="card ">
<div class="card-header d-flex justify-content-between">
<div><h5>Dropdown Color Variant</h5></div>
<div class="form-check form-switch">
<input class="form-check-input toggle-code" type="checkbox"
data-bs-target="#colorDropdown">
</div>
</div>
<div class="card-body">
<div class="d-flex gap-2 flex-wrap">
<div>
<div class="btn-group btn-rtl">
<button aria-expanded="false"
class="btn btn-gradient-primary dropdown-toggle"
data-bs-toggle="dropdown"
type="button">
Primary
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
<!-- Repeat similar blocks for Secondary, Success, Danger, Warning, Info, Dark, Light -->
</div>
</div>
</div>
Dropdown Color Variant
<div class="d-flex gap-2 flex-wrap">
<div>
<div class="btn-group btn-rtl">
<button aria-expanded="false"
class="btn btn-outline-primary dropdown-toggle"
data-bs-toggle="dropdown"
type="button">
Primary
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
<div>
<div class="btn-group btn-rtl">
<button class="btn btn-outline-secondary" type="button">Secondary</button>
<button aria-expanded="false"
class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split p-2"
data-bs-toggle="dropdown" type="button">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Secondary</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
<div>
<div class="btn-group btn-rtl">
<button aria-expanded="false"
class="btn btn-light-danger dropdown-toggle"
data-bs-toggle="dropdown"
type="button">
danger
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
<div>
<div class="btn-group btn-rtl">
<button class="btn btn-light-info" type="button">info</button>
<button aria-expanded="false"
class="btn btn-light-info dropdown-toggle dropdown-toggle-split p-2"
data-bs-toggle="dropdown" type="button">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Secondary</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
<div>
<div class="btn-group">
<button aria-expanded="false" class="btn btn-dark dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-arrow-bar-down"></i> dark
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a></li>
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a></li>
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a></li>
</ul>
</div>
</div>
<div>
<div class="btn-group btn-rtl">
<button class="btn btn-light" type="button"><i class="ti ti-arrow-bar-down me-1"></i> light</button>
<button aria-expanded="false"
class="btn btn-light dropdown-toggle dropdown-toggle-split p-2"
data-bs-toggle="dropdown" type="button">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Secondary</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
Sizing Dropdown
<div class="d-flex gap-2 flex-wrap">
<div>
<div class="btn-group btn-rtl">
<button aria-expanded="false"
class="btn btn-outline-primary btn-sm dropdown-toggle"
data-bs-toggle="dropdown"
type="button">
Small
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
<div>
<div class="btn-group btn-rtl">
<button aria-expanded="false"
class="btn btn-outline-primary btn-md dropdown-toggle"
data-bs-toggle="dropdown"
type="button">
Medium
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
<div>
<div class="btn-group btn-rtl">
<button aria-expanded="false"
class="btn btn-outline-primary btn-lg dropdown-toggle"
data-bs-toggle="dropdown"
type="button">
Large
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
<div>
<div class="btn-group btn-rtl">
<button aria-expanded="false"
class="btn btn-outline-primary btn-xl dropdown-toggle"
data-bs-toggle="dropdown"
type="button">
Extra Large
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
Hover Dropdown
<div class="d-flex gap-2 flex-wrap">
<div class="btn-group hover-dropdown">
<button aria-expanded="false"
class="btn btn-secondary dropdown-toggle waves-effect waves-light"
data-bs-toggle="dropdown" data-trigger="hover"
type="button">Hover
<i class="ti ti-arrow-big-down-line"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item">Action</a></li>
<li><a class="dropdown-item">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item">Separated link</a></li>
</ul>
</div>
<div class="btn-group hover-dropdown">
<button aria-expanded="false"
class="btn btn-dark dropdown-toggle waves-effect waves-light"
data-bs-toggle="dropdown" data-trigger="hover"
type="button">Hover
<i class="ti ti-arrow-big-down-line"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item">Action</a></li>
<li><a class="dropdown-item">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item">Separated link</a></li>
</ul>
</div>
</div>
Icon
-
English
-
Franaise
-
English
-
???????
-
Italia
<div class="d-flex gap-2 flex-wrap">
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn btn-light-secondary icon-btn b-r-10 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-capture"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a></li>
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a></li>
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a></li>
</ul>
</div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn btn-light-dark icon-btn b-r-10 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-moon-stars"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item d-flex align-items-center" href="#">
<span class="sun-logo bg-light-primary me-2 h-30 w-30 d-flex-center b-r-50 head-icon">
<i class="ti ti-sun"></i>
</span> Light
</a></li>
<li><a class="dropdown-item d-flex align-items-center" href="#">
<span class="sun-logo bg-light-dark me-2 h-30 w-30 d-flex-center b-r-50 head-icon">
<i class="ti ti-moon"></i>
</span> Dark
</a></li>
<li><a class="dropdown-item d-flex align-items-center" href="#">
<span class="sun-logo bg-light-info me-2 h-30 w-30 d-flex-center b-r-50 head-icon">
<i class="ti ti-device-desktop"></i>
</span> System
</a></li>
</ul>
</div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn btn-light-secondary icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<img src="https://pinmeets.com/assets/images/header/01.png"
class="img-fluid rounded h-20 w-20" alt="map">
</button>
<div class="dropdown">
<ul class="dropdown-menu dropdown-menu-end language-dropdown border-0">
<li class="lang lang-en selected dropdown-item p-2">
<span class="d-flex align-items-center">
<span class="h-20 w-20 d-flex-center">
<img src="https://pinmeets.com/assets/images/header/01.png" class="img-fluid rounded w-12" alt="map">
</span>
<span class="ps-2 f-s-13">English</span>
</span>
</li>
<li class="lang lang-pt dropdown-item p-2" title="FR">
<span class="d-flex align-items-center">
<span class="w-20 h-20 d-flex-center">
<img src="https://pinmeets.com/assets/images/header/02.png" class="img-fluid rounded" alt="map">
</span>
<span class="ps-2 f-s-13">Fran�aise</span>
</span>
</li>
<!-- more language items -->
</ul>
</div>
</div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn btn-light-dark icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-menu-2"></i>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item d-flex align-items-center justify-content-between text-muted" href="#">
Setting <span class="sun-logo h-30 w-30 d-flex-center b-r-50 head-icon"><i class="ti ti-settings"></i></span>
</a>
</li>
<li>
<a class="dropdown-item d-flex align-items-center justify-content-between text-muted" href="#">
Feature <span class="sun-logo h-30 w-30 d-flex-center b-r-50 head-icon"><i class="ti ti-function"></i></span>
</a>
</li>
<li>
<a class="dropdown-item d-flex align-items-center justify-content-between text-muted" href="#">
FAQ <span class="sun-logo h-30 w-30 d-flex-center b-r-50 head-icon"><i class="ti ti-question-circle"></i></span>
</a>
</li>
<li>
<a class="dropdown-item d-flex align-items-center justify-content-between text-muted" href="#">
Log Out <span class="sun-logo h-30 w-30 d-flex-center b-r-50 head-icon"><i class="ti ti-power"></i></span>
</a>
</li>
</ul>
</div>
</div>
Dropdown Color Variant
<div class="d-flex gap-2 flex-wrap">
<div class="btn-group dropup dropdown-light btn-rtl">
<button class="btn btn-light-primary dropdown-toggle"
data-bs-toggle="dropdown" type="button">
Dropup <i class="ti ti-arrow-narrow-up"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group dropup dropdown-light btn-rtl">
<button class="btn btn-light-secondary" type="button">Split dropup</button>
<button class="btn btn-light-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" type="button">
<span class="visually-hidden">Toggle Dropdown</span>
<i class="ti ti-arrow-narrow-up"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group dropend dropdown-light">
<button class="btn btn-light-success dropdown-toggle"
data-bs-toggle="dropdown" type="button">
Dropend <i class="ti ti-arrow-narrow-right"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group dropstart dropdown-light">
<button class="btn btn-light-warning dropdown-toggle"
data-bs-toggle="dropdown" type="button">
<i class="ti ti-arrow-narrow-left"></i> Dropstart
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group dropdown-light btn-rtl">
<button class="btn btn-light-dark" type="button">Dropup</button>
<button class="btn btn-light-dark dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" type="button">
<span class="visually-hidden">Toggle Dropdown</span>
<i class="ti ti-arrow-narrow-down"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
Profile Dropdown
Alex Houton
California , NYC
<div class="d-flex gap-3 flex-wrap">
<div class="btn-group dropdown-light btn-rtl">
<div class="h-50 w-50 b-r-50 bg-gradient-primary bg-outline-dark
overflow-hidden profile-img dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://pinmeets.com/assets/images/avatar/01.png"
class="img-fluid b-r-50" alt="">
</div>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Edit Profile</a></li>
<li><a class="dropdown-item" href="#">Change password</a></li>
<li><a class="dropdown-item" href="#">Terms of use</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item text-danger" href="#">Logged out</a></li>
</ul>
</div>
<div class="d-flex justify-content-center align-items-center gap-2">
<div class="btn-group dropdown-light btn-rtl">
<div class="h-50 w-50 b-r-10 bg-gradient-dark bg-outline-dark
profile-img dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://pinmeets.com/assets/images/avatar/12.png"
class="img-fluid" alt="">
</div>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Edit Profile</a></li>
<li><a class="dropdown-item" href="#">Change password</a></li>
<li><a class="dropdown-item" href="#">Terms of use</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item text-danger" href="#">Logged out</a></li>
</ul>
</div>
<div class="ms-1">
<div class="f-s-15 mb-0">Alex Houton</div>
<p class="text-muted f-s-12 mb-0">California , NYC</p>
</div>
</div>
</div>
