Dropdown Grid
Dropdown Grid - Full width
<!--begin:dropdown-Full-Width-->
<div class="dropdown position-lg-static">
<!--Dropdown trigger-->
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Full width
</button>
<!--Dropdown-menu-->
<div class="dropdown-menu rounded-top-0 w-100 py-4" aria-labelledby="dropdownMenuButton1">
<div class="row g-0">
<!--Dropdown-grid-Col-->
<div class="col-lg-4 mb-4 mb-lg-0">
<!--Dropdown Header-->
<h6 class="dropdown-header">Grid column</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>
<!--Dropdown-grid-Col-->
<div class="col-lg-4 mb-4 mb-lg-0">
<!--Dropdown Header-->
<h6 class="dropdown-header">Grid column</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>
<!--Dropdown-grid-Col-->
<div class="col-lg-4">
<!--Dropdown Header-->
<h6 class="dropdown-header">Grid column</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>
</div>
</div>
<!--/ Dropdown-menu-->
</div>
<!--/end:dropdown-Full-Width-->
Dropdown Grid - Container fluid
<!--begin:dropdown-Fluid-->
<div class="dropdown">
<!--Dropdown-trigger-->
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown container wide
</button>
<!--Dropdown-menu-->
<div class="dropdown-menu w-100 py-4" aria-labelledby="dropdownMenuButton2">
<div class="row g-0">
<!--Dropdown-grid-col-->
<div class="col-lg-3 mb-4 mb-lg-0">
<!--Dropdown Header-->
<h6 class="dropdown-header">Grid column</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>
<!--Dropdown-grid-col-->
<div class="col-lg-3 mb-4 mb-lg-0">
<!--Dropdown Header-->
<h6 class="dropdown-header">Grid column</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>
<!--Dropdown-grid-col-->
<div class="col-lg-3 mb-4 mb-lg-0">
<!--Dropdown Header-->
<h6 class="dropdown-header">Grid column</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>
<!--Dropdown-grid-col-->
<div class="col-lg-3">
<!--Dropdown Header-->
<h6 class="dropdown-header">Grid column</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>
</div>
</div>
</div>
<!--/end:dropdown-Fluid-->
Dropdown Grid - LG
<!--begin:dropdown-LG-->
<div class="dropdown">
<!--dropdown-trigger-->
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown LG
</button>
<!--dropdown-menu-->
<div class="dropdown-menu w-100 py-4" aria-labelledby="dropdownMenuButton3">
<div class="row g-0">
<!--dropdown-grid-col-->
<div class="col-lg-4 mb-4 mb-lg-0">
<!--Dropdown Header-->
<h6 class="dropdown-header">Grid column</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>
<!--dropdown-grid-col-->
<div class="col-lg-4 mb-4 mb-lg-0">
<!--Dropdown Header-->
<h6 class="dropdown-header">Grid column</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>
<!--dropdown-grid-col-->
<div class="col-lg-4">
<!--Dropdown Header-->
<h6 class="dropdown-header">Grid column</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>
</div>
</div>
</div>
<!--end:dropdown-LG-->
Dropdown Grid - MD
<!--begin:dropdown-MD-->
<div class="dropdown">
<!--dropdown-trigger-->
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton4"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown MD
</button>
<!--dropdown-menu-->
<div class="dropdown-menu dropdown-menu-md py-4" aria-labelledby="dropdownMenuButton4">
<div class="row g-0">
<!--dropdown-grid-col-->
<div class="col-lg-4 mb-4 mb-lg-0">
<!--Dropdown Header-->
<h6 class="dropdown-header">Grid column</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>
<!--dropdown-grid-col-->
<div class="col-lg-4 mb-4 mb-lg-0">
<!--Dropdown Header-->
<h6 class="dropdown-header">Grid column</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>
<!--dropdown-grid-col-->
<div class="col-lg-4">
<!--Dropdown Header-->
<h6 class="dropdown-header">Grid column</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>
</div>
</div>
</div>
<!--/end:dropdown-MD-->
Dropdown Grid - SM
<!--begin:dropdown-SM-->
<div class="dropdown">
<!--dropdown-trigger-->
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton5"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown SM
</button>
<!--dropdown-menu-->
<div class="dropdown-menu dropdown-menu-sm py-4" aria-labelledby="dropdownMenuButton">
<div class="row g-0">
<!--dropdown-grid-col-->
<div class="col-lg-6 mb-4 mb-lg-0">
<!--Dropdown Header-->
<h6 class="dropdown-header">Grid column</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>
<!--dropdown-grid-col-->
<div class="col-lg-6">
<!--Dropdown Header-->
<h6 class="dropdown-header">Grid column</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>
</div>
</div>
</div>
<!--/end:dropdown-SM-->
Dropdown Grid - XS
<!--begin:dropdown-XS-->
<div class="dropdown">
<!--dropdown-trigger-->
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton5"
data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true"
aria-expanded="false">
Dropdown XS
</button>
<!--dropdown-menu-->
<div class="dropdown-menu dropdown-menu-xs overflow-hidden"
aria-labelledby="dropdownMenuButton">
<div class="dropdown-header d-flex align-items-center justify-content-between pb-3">
<span>Notifications</span>
<div class="text-end">
<a href="#!" class="small link-underline">View All</a>
</div>
</div>
<!--Notification-item-->
<a href="#" class="dropdown-item py-3">
<div class="d-flex align-items-center">
<div class="me-3">
<span
class="avatar rounded-circle bg-warning text-white small fw-bold lh-1 d-flex align-items-center justify-content-center">
RT
</span>
</div>
<div class="overflow-hidden">
<span class="mb-0 d-block small lh-sm text-truncate">Rylan tolbert created a new
ticket</span>
<small class="text-body-tertiary">Just now</small>
</div>
</div>
</a>
<!--Notification-item-->
<a href="#" class="dropdown-item py-3">
<div class="d-flex align-items-center">
<div class="me-3">
<img src="assets/img/avatar/1.jpg" class="avatar rounded-circle" alt="">
</div>
<div class="overflow-hidden">
<span class="mb-0 lh-sm d-block small text-truncate">Tianna Fuller sent you
<span class="text-primary">$67.00</span> on paypal</span>
<small class="text-body-tertiary">1 hour ago</small>
</div>
</div>
</a>
<!--Notification-item-->
<a href="#" class="dropdown-item py-3">
<div class="d-flex align-items-center">
<div class="me-3">
<span
class="avatar rounded-circle bg-danger text-white lh-1 d-flex align-items-center justify-content-center">
<i class="bx bx-server"></i>
</span>
</div>
<div class="overflow-hidden">
<span class="mb-0 lh-sm d-block small text-truncate">Server on low space</span>
<small class="text-body-tertiary">Just now</small>
</div>
</div>
</a>
</div>
</div>
<!--/end:dropdown-XS-->
Let's start building stunning websites
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.