Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.. See official bootstrap document
Basic example
Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.
<div class="dropdown">
<button aria-expanded="false" data-bs-toggle="dropdown" class="btn btn-secondary dropdown-toggle" type="button">Dropdown button</button>
<div role="menu" class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="dropdown">
<a href="#" aria-expanded="false" data-bs-toggle="dropdown" class="btn btn-secondary dropdown-toggle" role="button">Dropdown link</a>
<div role="menu" class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Split button
Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.
<div class="btn-group">
<button type="button" class="btn btn-secondary">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
Sizing
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary btn-lg dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary btn-lg">
Large split button
</button>
<button type="button" class="btn btn-secondary btn-lg dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary btn-sm">
Small split button
</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary btn-xs dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary btn-xs">
Extra small split button
</button>
<button type="button" class="btn btn-secondary btn-xs dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Dropdown directions
Trigger dropdown menus above elements by adding .dropup, .dropstart or .dropend to the parent element.
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
dropleft
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary">
Split dropleft
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
dropright
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary">
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<ul class="dropdown-menu dropdown-menu-end">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned, right-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned, left-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</ul>
</div>
Dropdown animation
Use data attribute data-dropdown-animation with data-bs-toggle="dropdown" to animate dropdown.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-dropdown-animation aria-haspopup="true" aria-expanded="false">
dropdown
</button>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Menu content
Create menu items with button or anchor tags. You can also add non-interactive dropdown items or add a header to label sections or separate groups with a divider.
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Demo
</button>
<div class="dropdown-menu w-210p">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item active" href="#">Active link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a>
<span class="dropdown-item-text">Dropdown item text</span>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Header styles and icon
Create menu items with button or anchor tags. You can also add non-interactive dropdown items or add a header to label sections or separate groups with a divider.
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Demo
</button>
<div class="dropdown-menu w-210p">
<h6 class="dropdown-header">Dropdown header</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="profile.html"><i class="dropdown-icon las la-user"></i><span>Profile</span></a>
<a class="dropdown-item" href="#"><i class="dropdown-icon las la-credit-card"></i><span>my balance</span></a>
<a class="dropdown-item" href="inbox.html"><i class="dropdown-icon las la-envelope"></i><span>Inbox</span></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Follow</a>
<a class="dropdown-item" href="#">Unfollow</a>
<a class="dropdown-item" href="#">Add Tag</a>
<div class="dropdown-divider"></div>
<h6 class="dropdown-header dropdown-header-bold">Dropdown header</h6>
<a class="dropdown-item" href="#">Send Email</a>
<a class="dropdown-item" href="#">Export to pdf</a>
</div>
</div>
Header styles 2
Add .header-wth-bg with .dropdown-header class.
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Demo
</button>
<div class="dropdown-menu w-210p">
<h6 class="dropdown-header header-wth-bg">Dropdown header</h6>
<a class="dropdown-item" href="profile.html"><i class="dropdown-icon las la-user"></i><span>Profile</span></a>
<a class="dropdown-item" href="#"><i class="dropdown-icon las la-credit-card"></i><span>my balance</span></a>
<a class="dropdown-item" href="inbox.html"><i class="dropdown-icon las la-envelope"></i><span>Inbox</span></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Follow</a>
<a class="dropdown-item" href="#">Unfollow</a>
<a class="dropdown-item" href="#">Add Tag</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Send Email</a>
<a class="dropdown-item" href="#">Export to pdf</a>
</div>
</div>
Center align text
add class.text-center with dropdown-menu class
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Demo
</button>
<div class="dropdown-menu w-210p">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Follow</a>
<a class="dropdown-item" href="#">Unfollow</a>
<a class="dropdown-item" href="#">Add Tag</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Send Email</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Export to pdf</a>
</div>
</div>
With button
add class.text-center with dropdown-menu class
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Demo
</button>
<div class="dropdown-menu w-210p">
<div class="dropdown-item">
<button class="btn btn-soft-primary btn-wth-icon btn-block"><span><span class="icon"><span class="feather-icon"><i data-feather="circle"></i></span></span><span class="btn-text">Icon Button</span></span></button>
</div>
<div class="dropdown-item">
<button class="btn btn-soft-primary btn-wth-icon btn-block"><span><span class="icon"><span class="feather-icon"><i data-feather="book"></i></span></span><span class="btn-text">Icon Button</span></span></button>
</div>
</div>
</div>
Adding text
Place any freeform text within a dropdown menu with text and use spacing utilities or simply use.dropdown-item-text class.
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Demo
</button>
<div class="dropdown-menu p-4 w-250p">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p>
And this is more example text.
</p>
</div>
</div>
With avatar
Place avatar in dropdown item.
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Demo
</button>
<div class="dropdown-menu dropdown-menu-icon-text">
<a class="dropdown-item" href="#">
<div class="d-flex align-items-center">
<div class="hk-icon hk-icon hk-icon-filled hk-icon-theme hk-icon-rounded me-10">
<i class="ri-image-fill"></i>
</div>
<div>
<span class="h6 mb-0">Photo or Video Library</span>
<p class="dropdown-item-text">Dropdown item text paragraph</p>
</div>
</div>
</a>
<a class="dropdown-item" href="#">
<div class="d-flex align-items-center">
<div class="hk-icon hk-icon hk-icon-filled hk-icon-primary hk-icon-rounded me-10">
<i class="ri-file-4-fill"></i>
</div>
<div>
<span class="h6 mb-0">Documents</span>
<p class="dropdown-item-text">Dropdown item text paragraph</p>
</div>
</div>
</a>
</div>
</div>
With Images
Place any icon or image inside.dropdown-item-text class.
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Demo
</button>
<div class="dropdown-menu dropdown-menu-avatar">
<a class="dropdown-item" href="#"><i class="dropdown-icon flag-icon flag-icon-in"></i><span>India</span></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="dropdown-icon flag-icon flag-icon-tz"></i><span>Spain</span></a>
</div>
</div>
Dropdown with icons and border + No shadow
Add an icon using dropdown-menu .dropdown-bordered
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Demo
</button>
<div class="dropdown-menu dropdown-bordered">
<a class="dropdown-item" href="profile.html"><i class="dropdown-icon las la-user"></i><span>Profile</span></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="dropdown-icon las la-credit-card"></i><span>my balance</span></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="inbox.html"><i class="dropdown-icon las la-envelope"></i><span>Inbox</span></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="dropdown-icon las la-cog"></i><span>Settings</span></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="dropdown-icon las la-sign-out-alt"></i><span>Log Out</span></a>
</div>
</div>
Menu forms
Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Demo
</button>
<div class="dropdown-menu">
<form class="p-3">
<div class="form-group">
<label class="form-label" for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
</div>
<div class="form-group">
<label class="form-label" for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<div class="dropdown-item"> New around here? <a class="" href="#">Sign up</a></div>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
</div>
Linked Field
Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Demo
</button>
<div class="dropdown-menu">
<div class="dropdown-item" href="#"><i class="dropdown-icon las la-link"></i><a href="https://flagicons.lipis.dev/">https://flagicons.lipis.dev/</a></div>
</div>
</div>
Dropdown inverse
Add .dropdown-menu-dark modifier class to change the dropdown look to a dark one.
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Demo
</button>
<div class="dropdown-menu dropdown-menu-dark">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item active" href="#">Active link</a>
<a class="dropdown-item" href="#">Disabled link</a>
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Dropdown with checkbox
Checkout the example of dropdown with checkbox.
-
Morgan Freeman -
Huma Therman -
Charlie Chaplin -
Winston Churchil -
Office Board -
Boss Baby -
Jaquiline Joker
-
Morgan Freeman
-
Huma Therman
-
Charlie Chaplin
-
Winston Churchil
-
Office Board
-
Boss Baby
-
Jaquiline Joker
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Demo
</button>
<div class="dropdown-menu w-250p">
<ul class="nav nav-line nav-tabs nav-light">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_lead4">
<span class="nav-link-text">Users</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="tab" href="#">
<span class="nav-link-text">Metrics</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_lead4">
<div>
<form class="mb-3" role="search">
<input type="text" class="form-control" placeholder="Search People">
</form>
<div class="h-250p">
<div data-simplebar class="nicescroll-bar">
<ul class="invite-user-list p-0">
<li class="d-flex align-items-center justify-content-between mb-3">
<div class="media d-flex align-items-center">
<div class="avatar avatar-xs me-3">
<img src="dist/img/avatar2.jpg" alt="user" class="avatar-img">
</div>
<div class="media-body">
<div>
<div class="user-name">Morgan Freeman</div>
</div>
</div>
</div>
<div class="form-check form-check-theme ms-3">
<input type="checkbox" class="form-check-input" id="customCheck2">
<label class="form-check-label" for="customCheck2"></label>
</div>
</li>
<li class="d-flex align-items-center justify-content-between mb-3">
<div class="media d-flex align-items-center">
<div class="avatar avatar-xs me-3">
<img src="dist/img/avatar7.jpg" alt="user" class="avatar-img">
</div>
<div class="media-body">
<div>
<div class="user-name">Huma Therman</div>
</div>
</div>
</div>
<div class="form-check form-check-theme ms-3">
<input type="checkbox" class="form-check-input" id="customCheck3">
<label class="form-check-label" for="customCheck3"></label>
</div>
</li>
<li class="d-flex align-items-center justify-content-between mb-3">
<div class="media d-flex align-items-center">
<div class="avatar avatar-xs me-3">
<img src="dist/img/avatar3.jpg" alt="user" class="avatar-img">
</div>
<div class="media-body">
<div>
<div class="user-name">Charlie Chaplin</div>
</div>
</div>
</div>
<div class="form-check form-check-theme ms-3">
<input type="checkbox" class="form-check-input" id="customCheck4">
<label class="form-check-label" for="customCheck4"></label>
</div>
</li>
<li class="d-flex align-items-center justify-content-between mb-3">
<div class="media d-flex align-items-center">
<div class="avatar avatar-xs me-3">
<img src="dist/img/avatar13.jpg" alt="user" class="avatar-img">
</div>
<div class="media-body">
<div>
<div class="user-name">Winston Churchil</div>
</div>
</div>
</div>
<div class="form-check form-check-theme ms-3">
<input type="checkbox" class="form-check-input" id="customCheck5">
<label class="form-check-label" for="customCheck5"></label>
</div>
</li>
<li class="d-flex align-items-center justify-content-between mb-3">
<div class="media d-flex align-items-center">
<div class="avatar avatar-xs me-3">
<img src="dist/img/avatar1.jpg" alt="user" class="avatar-img">
</div>
<div class="media-body">
<div>
<div class="user-name">Office Board</div>
</div>
</div>
</div>
<div class="form-check form-check-theme ms-3">
<input type="checkbox" class="form-check-input" id="customCheck6">
<label class="form-check-label" for="customCheck6"></label>
</div>
</li>
<li class="d-flex align-items-center justify-content-between mb-3">
<div class="media d-flex align-items-center">
<div class="avatar avatar-xs me-3">
<img src="dist/img/avatar6.jpg" alt="user" class="avatar-img">
</div>
<div class="media-body">
<div>
<div class="user-name">Boss Baby</div>
</div>
</div>
</div>
<div class="form-check form-check-theme ms-3">
<input type="checkbox" class="form-check-input" id="customCheck7">
<label class="form-check-label" for="customCheck7"></label>
</div>
</li>
<li class="d-flex align-items-center justify-content-between">
<div class="media d-flex align-items-center">
<div class="avatar avatar-xs me-3">
<img src="dist/img/avatar5.jpg" alt="user" class="avatar-img">
</div>
<div class="media-body">
<div>
<div class="user-name">Jaquiline Joker</div>
</div>
</div>
</div>
<div class="form-check form-check-theme ms-3">
<input type="checkbox" class="form-check-input" id="customCheck8">
<label class="form-check-label" for="customCheck8"></label>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Dropdown with radio
Checkout the example of dropdown with radio.
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Demo
</button>
<div class="dropdown-menu w-200p">
<div class="dropdown-item">
<div class="form-check form-check-theme">
<input type="radio" class="form-check-input" id="customR6" name="customRadio">
<label class="form-check-label" for="customR6">Last Day</label>
</div>
</div>
<div class="dropdown-item">
<div class="form-check form-check-theme">
<input type="radio" class="form-check-input" id="customR7" name="customRadio" checked>
<label class="form-check-label" for="customR7">Last 15 Days</label>
</div>
</div>
<div class="dropdown-item">
<div class="form-check form-check-theme">
<input type="radio" class="form-check-input" id="customR8" name="customRadio">
<label class="form-check-label" for="customR8">Last 30 Days</label>
</div>
</div>
<div class="dropdown-item">
<div class="form-check form-check-theme">
<input type="radio" class="form-check-input" id="customR9" name="customRadio">
<label class="form-check-label" for="customR9">Last quater</label>
</div>
</div>
<div class="dropdown-item">
<div class="form-check form-check-theme">
<input type="radio" class="form-check-input" id="customR10" name="customRadio">
<label class="form-check-label" for="customR10">Last Year</label>
</div>
</div>
<div class="dropdown-divider"></div>
<div class="dropdown-item">
<i class="dropdown-icon las la-plus"></i> <span>Custom Date</span>
</div>
</div>
</div>