Select

Copy
  
   
 <div class="row">
   <div class="col-lg-4">
   <label for="exampleFormControlInput1" class="form-label">Field Label (Default)</label>
   <div class="dropdown">
     <button type="button" class="form-select form-select-sm" data-toggle="dropdown">
       Dropdown button
     </button>
     <div class="dropdown-menu w-100 ">
       <a class="dropdown-item" href="#"> 
           <div class="form-check">
               <input class="form-check-input" type="radio" name="grid-Radios-btn" id="gridRadios5" value="option1" checked="">
               <label class="form-check-label" for="gridRadios5">
                 Option - 1
               </label>
             </div>
       </a>
       <a class="dropdown-item" href="#"> 
           <div class="form-check">
               <input class="form-check-input" type="radio" name="grid-Radios-btn" id="gridRadios6" value="option2">
               <label class="form-check-label" for="gridRadios6">
                   Option - 2
               </label>
             </div>
       </a>
       <a class="dropdown-item" href="#"> 
           <div class="form-check disabled">
               <input class="form-check-input" type="radio" name="grid-Radios-btn" id="gridRadios7" value="option">
               <label class="form-check-label" for="gridRadios7">
                   Option - 3
               </label>
             </div>
       </a>
        </div>
   </div>
   </div>




 <div class="col-lg-4">
 <label for="exampleFormControlInput1" class="form-label">Field Label (Default)</label>
 <div class="dropdown">
   <button type="button" class="form-select form-select-sm" data-toggle="dropdown">
     Dropdown button
   </button>
   <div class="dropdown-menu w-100 ">
     <a class="dropdown-item" href="#"> <div class="form-check">
       <input class="form-check-input" type="checkbox" id="gridCheck1">
       Option - 1
   </div>
     </a>
     <a class="dropdown-item" href="#"> <div class="form-check">
       <input class="form-check-input" type="checkbox" id="gridCheck1" >
       Option - 2
   </div>
     </a><a class="dropdown-item" href="#"> <div class="form-check">
       <input class="form-check-input" type="checkbox" id="gridCheck1">
       Option - 3
   </div>
     </a>                                </div>
 </div>
 </div>


 <div class="col-lg-4">
 <label for="exampleFormControlInput1" class="form-label">Field Label (Disabled)</label>
 <div class="dropdown">
   <button type="button" class="form-select form-select-sm" data-toggle="dropdown" disabled>
     Dropdown button
   </button>
   <div class="dropdown-menu ">
     <a class="dropdown-item" href="#"> <div class="form-check">
       <input class="form-check-input" type="checkbox" id="gridCheck1">
       Option - 1
   </div>
     </a>
     <a class="dropdown-item" href="#"> <div class="form-check">
       <input class="form-check-input" type="checkbox" id="gridCheck1" >
       Option - 2
   </div>
     </a><a class="dropdown-item" href="#"> <div class="form-check">
       <input class="form-check-input" type="checkbox" id="gridCheck1">
       Option - 3
   </div>
     </a>                                </div>
 </div>
 </div>
 

 


 

 
</div>
Copy
                                       
  
   
                                             
     .form-label {
        margin-bottom: 0.5rem;
        color: #7A7A7A;
        font-weight: 600;
        font-size: 12px;
     }
     
     .form-select-sm {
        display: block;
        padding: 0.375rem 0.75rem;
        font-weight: 400;
        line-height: 1.5;
        color: #9D9D9B;
        background-color: #fff;
        background-clip: padding-box;
        border: 1.5px solid #DFE1E6;
        appearance: none;
        border-radius: 6px;
        text-align: left;
     }
     
     .dropdown-menu {
        border-radius: 4px;
        padding: 10px 0;
        -webkit-animation-name: dropdown-animate;
        animation-name: dropdown-animate;
        -webkit-animation-duration: 0.2s;
        animation-duration: 0.2s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        border: 0;
        box-shadow: 0 5px 30px 0 rgb(82 63 105 / 20%);
     }
     .dropdown-menu .dropdown-item {
        font-size: 14px;
        padding: 10px 15px;
        transition: 0.3s;
     }
     
       .dropdown-item {
        display: block;
        width: 100%;
        padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
        clear: both;
        font-weight: 400;
        color: var(--bs-dropdown-link-color);
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
     }
     
                                           
      
                                           
       .dropdown-item.selected {
          background: #CFCFCF;
      }
      
      .dropdown-menu .h6, h6 {
        font-size: 14px;
        padding: 15px 15px 5px 15px;
        color: #7A7A7A;
      }                                          
                                                                                                                                     
     label.form-check-label {
         color: #363431;
         font-weight: 400;
         font-size: 14px;
     }