Bootstrap 3 dropdowns are mainly used in the navigation menu to make a dropdown menu, But sometimes it is used in button and div also for scripting. A bootstrap 3 dropdowns is a toggleable menu that allows you to choose a value from a togglable list.
Basic Dropdown
To make a basic dropdown add the class name .dropdown to a parent div and inside that create a button or anchor tag and add the class name .dropdown-toggle and data-toggle="dropdown" to it and then create a list with the class name .dropdown-menu and you have done a basic bootstrap 3 dropdown.
Example
Dropdown Divider
To make dropdown divider use .divider class name to a li inside the ul with the class name .dropdown-menu it is used to separate element inside the dropdown menu with a horizontal border
Example
Dropdown Header
Like dropdown divider use class name .dropdown-header to add headers inside the dropdown menu.
Example
Disable and Active items
to make an item disable that is on hover a cross button will appear to use the class name .disabled and to make a Highlight item use class name .active to make a blue background item.
Example
Dropdown Position
You can make a dropdown position right by using the class name .dropdown-menu-right on the ul with the class name .dropdown-menu and it will open on the right side of the page.
Example
Dropdown role and area
To improve accessibility using screen readers, you can include the role and aria-* in a dropdown menu.
Example
In this post we have learned how to make Bootstrap 3 Dropdowns and Dropup, I hope the post helped you, please leave a comment to make the site more useful and better.
Thanks for reading
