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.