Bootstrap - Dropdowns Demo


Creating a Basic Dropdown

To create a basic dropdown in Bootstrap, use the .dropdown class on a container element. Inside the container, use a <button> element to create the dropdown toggle. The button should have the .dropdown-toggle class and the data-bs-toggle="dropdown" attribute to enable the dropdown functionality.


<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Dropdown Button
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
    <li><a class="dropdown-item" href="#">Option 3</a></li>
Element Description
<div> Has the .dropdown class, which creates the dropdown container.
<button> Inside the container, has the .btn and .btn-primary classes to style it as a primary button. It also has the .dropdown-toggle class and the data-bs-toggle="dropdown" attribute to enable the dropdown toggle functionality.
<ul> Has the .dropdown-menu class and creates the dropdown menu that will appear when the button is clicked.
<li> Inside the dropdown menu, add dropdown items using <li> elements. Each <li> contains an <a> element with the .dropdown-item class, representing a clickable option in the dropdown menu.

When you click the button, the dropdown menu will appear below the button, showing the available options. You can then click on an option to select it.

You can customize the appearance of the dropdown button and menu items by applying additional classes or custom styles. Bootstrap provides various button styles and dropdown menu modifiers that you can use to match your design requirements.

Remember to include the necessary Bootstrap CSS and JavaScript files in your project for the dropdown to function properly.