Bskin Bootstrap 5 skin ui kit
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
<div class="dropdown">
<a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu dropdown-menu-sm" aria-labelledby="dropdownMenuLink">
<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>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Action</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-sm">
<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>
</ul>
</div>
<!-- Default dropend button -->
<div class="btn-group dropend me-5 mb-4">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<ul class="dropdown-menu dropdown-menu-sm">
<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>
</ul>
</div>
<!-- Split dropright button -->
<div class="btn-group dropend me-5 mb-4">
<button type="button" class="btn btn-primary ">
Split dropend
</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropright</span>
</button>
<ul class="dropdown-menu dropdown-menu-sm">
<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>
</ul>
</div>
<!-- Default dropup button -->
<div class="btn-group dropup me-5 mb-4">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu dropdown-menu-sm">
<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>
</ul>
</div>
<!-- Split dropup button -->
<div class="btn-group dropup me-5 mb-4">
<button type="button" class="btn btn-primary ">
Split dropup
</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-sm">
<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>
</ul>
</div>
<!-- Large button groups (default and split) -->
<div class="btn-group me-5 mb-4">
<button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Large button
</button>
<ul class="dropdown-menu dropdown-menu-sm">
<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>
</ul>
</div>
<!-- Large split button -->
<div class="btn-group me-5 mb-4">
<button type="button" class="btn btn-primary btn-lg">
Large split button
</button>
<button type="button" class="btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-sm">
<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>
</ul>
</div>
© Copyright-2022 DesignCollection.in. All rights reserved.