Suggested Video Tutorials
Part 14 - Bootstrap table classes
Part 15 - Bootstrap button classes
Part 16 - Bootstrap icons
In this video, we will discuss creating a dropdown menu using bootstrap
Creating bootstrap hyperlink dropdown
Here is the HTML required
Creating bootstrap button dropdown
To create a dropdown with a button as the trigger element, replace the anchor element with a button element as shown below.
Applying bootstrap button classes (btn & btn-primary) on the button element will style the dropdown button as shown below.
Dropdown menu header
To add a header to the dropdown menu, use dropdown-header class on an <li> element
Dropdown menu divider
To add a divider between the dropdown menu items, use divider class on an <li> element
Disabled dropdown menu item
To disable a menu item, use the disabled class
If you want the dropdown menus to expand upwards, nest the dropdown markup in a <div> element with class dropup as shown below.
Here is the HTML
Part 14 - Bootstrap table classes
Part 15 - Bootstrap button classes
Part 16 - Bootstrap icons
In this video, we will discuss creating a dropdown menu using bootstrap
Creating bootstrap hyperlink dropdown
![bootstrap dropdown hyperlink](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYheh-01ienotiXuwo6yOZCqs-ICyUUtwmSaLBdth8ln8dJbpdXd2WC-s-cdFjDyY0o7OwEJyuaD2r1Fm2zYcNmdAKdWhIMkO516O2mIb_1benaSKkWBWOyIv7LVUVRa_WR124lyfipQv7/s1600/bootstrap+dropdown+hyperlink.png)
Here is the HTML required
<div class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle">
Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
</ul>
</div>
![bootstrap 3 dropdown menu](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb1zOi_myWb6eFVS2BPyazQCXbEQQoYL8azox7oJ1W5sVXjZRxeIEdSVBs4cePlmB1Xe_-1iFSgHqx8_l_CD0GYtha9Xzaox1KQjNtG3Hr4aECZB6PlvuR-7aYEFVfWnhKOD9sKJxdyQ3D/s1600/bootstrap+3+dropdown+menu.png)
Creating bootstrap button dropdown
![bootstrap button dropdown example](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb1Bawxp7Iglg-SVjBItJCBr4f46qVufrjaeFvHcsVH52QySkHjKRQdUQLZ3S13jKCzWaMr9E_VHHbw9rzg5CCdbF71w8-yRk7tfd-vkks5WTBJ4ZDR2TyfPY8RuF8FqTAGqDaoqvry270/s1600/bootstrap+button+dropdown+example.png)
To create a dropdown with a button as the trigger element, replace the anchor element with a button element as shown below.
<div class="dropdown">
<button data-toggle="dropdown" class="dropdown-toggle">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
</ul>
</div>
Applying bootstrap button classes (btn & btn-primary) on the button element will style the dropdown button as shown below.
![bootstrap button dropdown menu](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsgUbuWezP-EeCssdGgFDL46xMvQex4Fd4d1946eArfLc3uFpGXC2nftCfcVQiAc5dSep_8wJiKmWWddSBO-_ALjzTf3a13p5fXNNT2EXkVlU9JfYAFfLWcK0Uy-dTlBjZA64DBC4iHkkF/s1600/bootstrap+button+dropdown+menu.png)
Dropdown menu header
![bootstrap dropdown menu header](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLI1mM0H0jVqFBsnaRe5lDv5egM4jFRmLr0RHQRAnieB_F9CdnlCSr63NXrnrtGlHc-8em0l2buxWr7MW5d3G5189jB5YqqJnm2LRZgzxCxKXgukbz4AoP012jbNqR3Fv6nCtUzP1ODo7Y/s1600/bootstrap+dropdown+menu+header.png)
To add a header to the dropdown menu, use dropdown-header class on an <li> element
<div class="dropdown">
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header"><strong>Header 1</strong></li>
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
<li class="dropdown-header"><strong>Header 2</strong></li>
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
</ul>
</div>
Dropdown menu divider
![bootstrap dropdown menu divider](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJKR6dIK3OfMvgaqdOIvB74ankMhyphenhyphenygFPbJLKxhel0uLtqOs8UmnHsovIWA7nBsvx3XNi8soChOeIft4fW-2_9tZjE4lUz8VUxAgZ3LdRzOLnJAl5vq4CNyvoT6cMghULDwN0sRE6tkEJX/s1600/bootstrap+dropdown+menu+divider.png)
To add a divider between the dropdown menu items, use divider class on an <li> element
<div class="dropdown">
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header"><strong>Header 1</strong></li>
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
<li class="divider"></li>
<li class="dropdown-header"><strong>Header 2</strong></li>
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
</ul>
</div>
Disabled dropdown menu item
![bootstrap dropdown menu item disabled](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLEClBHb-coWOnvmzcFVnelHCW-gOFgT2EdUpt7BuNCpgrwXOIBLYS_7fWDFufZQr6ihTjSuWcgC_bWRuzrOSKYRXMS3NrLIVaxD1f59gInWkEBp0xnyM2yRoZrMtsxpgLyvET7EQ5NyNb/s1600/bootstrap+dropdown+menu+item+disabled.png)
To disable a menu item, use the disabled class
<div class="dropdown">
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header"><strong>Header 1</strong></li>
<li><a href="#">Action 1</a></li>
<li class="disabled"><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
<li class="divider"></li>
<li class="dropdown-header"><strong>Header 2</strong></li>
<li><a href="#">Action 1</a></li>
<li class="disabled"><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
</ul>
</div>
If you want the dropdown menus to expand upwards, nest the dropdown markup in a <div> element with class dropup as shown below.
![bootstrap button dropdown upwards](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTPhxSWiS1B3tL7faNUUrnBOWFvL5uzz-tif0gUtsOP0kKj_zUvwCLNuMVnQSc88EZHOB_HCoKLo27OIiHqHGUg8vTCkv69jTpMRTFAlAyjh-zaom8U5WTwXRWpGH6FTEzHRFtM0nwg0k8/s1600/bootstrap+button+dropdown+upwards.png)
Here is the HTML
<div class="dropup">
<div class="dropdown">
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header"><strong>Header 1</strong></li>
<li><a href="#">Action 1</a></li>
<li class="disabled"><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
<li class="divider"></li>
<li class="dropdown-header"><strong>Header 2</strong></li>
<li><a href="#">Action 1</a></li>
<li class="disabled"><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
</ul>
</div>
</div>
![bootstrap tutorial for beginners](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_03fbnWvW2zvfwA1f2qr0lAcU_tqV-0TcxHuTxHR37oSpIKPhyQkmsA6Dv8POqdnRpxs-G76aI9MiZgnazPGmzB4mOukWlc-9BWjarWMee69te9QcFt2GyIGUnfweX_cDQh4Zf-cGvjJY/s1600/bootstrap+tutorial+for+beginners.png)
HI Would you please give a video tutorial on how to create searchable multi select drop down.
ReplyDeleteAnd it also helps if you can give video tutorial on how to create custom directives.
Hi , Since I have muliple content in my drop down menu, I would like to crate a scrollable drop down option. Could you please share the example
ReplyDeletepre-scrollable class will do the trick
DeleteHow to have a default value already set in dropdown.
ReplyDelete