Course Content
Bootstrap 5 Alerts
0/1
Progress Bars
0/1
Spinners
0/1
Pagination
0/1
List Groups
0/1
Bootstrap 5 Scrollspy
0/1
Bootstrap
About Lesson

Advanced Dropdowns (Forms & Inputs in Dropdowns)

  • .form-control → Adds a form input field inside a dropdown
  • .dropdown-header → Adds a header inside a dropdown
  • .dropdown-divider → Adds a divider line between items
HTML
<div class="dropdown">
  <button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Searchable Dropdown
  </button>
  <ul class="dropdown-menu">
    <li>
      <input class="form-control" type="text" placeholder="Search...">
    </li>
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
  </ul>
</div>