Dropdown
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="#">
Option - 1
</a>
<a class="dropdown-item" href="#">
Option - 2
</a>
<a class="dropdown-item selected" href="#">
Option - 3
</a>
<a class="dropdown-item" href="#">
Option - 4
</a>
<a class="dropdown-item" href="#">
Option - 5
</a>
<a class="dropdown-item" href="#">
Option - 6
</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="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>
<h6>Heading - 1 </h6>
<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 mt-3">
<label for="exampleFormControlInput1" class="form-label">Field Label (Default)</label>
<div class="dropdown 0">
<button type="button" class="form-select form-select-sm" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu w-100">
<h6>Group Heading - 1 </h6>
<a class="dropdown-item " href="#">
Option - 1
</a>
<a class="dropdown-item" href="#">
Option - 2
</a>
<a class="dropdown-item selected" href="#">
Option - 3
</a>
<h6>Group Heading - 2 </h6>
<a class="dropdown-item" href="#">
Option - 4
</a>
<a class="dropdown-item" href="#">
Option - 5
</a>
<a class="dropdown-item" href="#">
Option - 6
</a>
</div>
</div>
</div>
<div class="col-lg-4 mt-3">
<label for="exampleFormControlInput1" class="form-label">Field Label (Default)</label>
<div class="dropdown 0">
<button type="button" class="form-select form-select-sm" data-toggle="dropdown" disabled>
Dropdown button
</button>
<div class="dropdown-menu w-100">
<h6>Group Heading - 1 </h6>
<a class="dropdown-item " href="#">
Option - 1
</a>
<a class="dropdown-item" href="#">
Option - 2
</a>
<a class="dropdown-item selected" href="#">
Option - 3
</a>
<h6>Group Heading - 2 </h6>
<a class="dropdown-item" href="#">
Option - 4
</a>
<a class="dropdown-item" href="#">
Option - 5
</a>
<a class="dropdown-item" href="#">
Option - 6
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="dropdown-menu w-100 show"
style="position: inherit;will-change: transform;top: 25px !important;left: 0px;transform: translate3d(0px, -300px, 0px);margin-top: 100%;">
<h6>Group Heading - 1 </h6>
<a class="dropdown-item " href="#">
Option - 1
</a>
<a class="dropdown-item" href="#">
Option - 2
</a>
<a class="dropdown-item selected" href="#">
Option - 3
</a>
<h6>Group Heading - 2 </h6>
<a class="dropdown-item" href="#">
Option - 4
</a>
<a class="dropdown-item" href="#">
Option - 5
</a>
<a class="dropdown-item" href="#">
Option - 6
</a>
</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;
}