Dropdown Grid

Dropdown Grid - Full width
Grid column
Action Another action Something else here
Grid column
Action Another action Something else here
Grid column
Action Another action Something else here 

    <!--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
Grid column
Action Another action Something else here
Grid column
Action Another action Something else here
Grid column
Action Another action Something else here
Grid column
Action Another action Something else here 

    <!--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
Grid column
Action Another action Something else here
Grid column
Action Another action Something else here
Grid column
Action Another action Something else here 

    <!--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
Grid column
Action Another action Something else here
Grid column
Action Another action Something else here
Grid column
Action Another action Something else here 

    <!--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
Grid column
Action Another action Something else here
Grid column
Action Another action Something else here 

    <!--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
Notifications
View All
RT
Rylan tolbert created a new ticket Just now
Tianna Fuller sent you $67.00 on paypal 1 hour ago
Server on low space Just now 

    <!--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.