Dropdowns & Collapse

Dropdowns need Bootstrap JS. Toggle with data-bs-toggle="dropdown" on a button or link. Menu items go in <ul class="dropdown-menu">.

Dropdowns

Dropdowns need Bootstrap JS. Toggle with data-bs-toggle="dropdown" on a button or link. Menu items go in <ul class="dropdown-menu">.

Use .dropdown-item for links, .dropdown-divider for separators, and .dropdown-menu-end to align right.

Real-life example: A dropdown is like a restaurant menu that drops down when you tap "Menu" — hidden until needed, then a list of choices.

Button dropdown

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Choose course
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">HTML & CSS</a></li>
    <li><a class="dropdown-item" href="#">JavaScript</a></li>
    <li><hr class="dropdown-divider" /></li>
    <li><a class="dropdown-item" href="#">Bootstrap 5</a></li>
  </ul>
</div>

Collapse

Collapse hides and shows content with a smooth animation. The trigger uses data-bs-toggle="collapse" and data-bs-target="#id". The panel needs .collapse and a unique id.

Add .show to start open. Accordion is built from multiple collapse panels (covered with components later).

Real-life example: Collapse is like an folding umbrella — click the handle and the content opens; click again and it folds away.

Remember: include bootstrap.bundle.min.js before </body> or dropdowns and collapse will not work.

Collapse toggle

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
  Show answer
</button>
<div class="collapse mt-2" id="faq1">
  <div class="card card-body">
    Bootstrap 5 does not require jQuery — only the bundle JS file.
  </div>
</div>