Creating and Customizing Dropdowns with Bootstrap: A Comprehensive Guide
Learn how to implement and customize dropdown menus using Bootstrap. This tutorial covers creating basic dropdowns, adding dividers, and utilizing various Bootstrap classes for styling and functionality, enhancing user interaction and improving the design of your web forms and navigation menus.
Creating Dropdowns with Bootstrap
Bootstrap dropdowns provide a user-friendly way to present lists of options in a compact, interactive menu. This guide covers various styles and configurations.
Basic Dropdown
A basic dropdown is created using a container element with the class `.dropdown`, a trigger element (button or link) with classes `.dropdown-toggle` and `data-toggle="dropdown"`, and a menu (`
- `) with the class `.dropdown-menu`. The `data-toggle` attribute is essential for enabling the dropdown functionality.
Adding a Divider
Use the class `.dropdown-divider` to add a visual separator between dropdown items.
Adding a Header
Use the class `.dropdown-header` to add a header to your dropdown menu.
Disabling Dropdown Items
Disable a dropdown item using the class `.disabled`.
Active and Disabled Items (Bootstrap 4)
In Bootstrap 4, highlight an active item using the `.active` class (it shows a blue background) and disable an item with the `.disabled` class (light grey text, with a "no-parking-sign" icon on hover).
Dropdown Position
By default, the dropdown menu appears to the left of the trigger. To make it appear on the right, add the class `.dropdown-menu-right` to the `.dropdown-menu` element.
Dropup Menus
Change the container element's class from `.dropdown` to `.dropup` to make the dropdown menu open upwards instead of downwards.
Split Button Dropdowns
Create split button dropdowns by combining a button with a dropdown menu. Contextual classes can be used to style the buttons.