Interactive Components

This section documents Bootstrap 5.x as implemented by the official Bootstrap project. No specific patch version is pinned. Unlike the other reference sections on this site, no single reference book underpins it: the content was generated with the assistance of AI from general knowledge of Bootstrap, and should be verified against the current official documentation at getbootstrap.com/docs before relying on it in production.

This section’s bibliography lists the reference material consulted while preparing these pages.

Dropdowns, accordions, and carousels are Bootstrap’s three most commonly used stateful components — each one toggles between visual states (open/closed, expanded/collapsed, current/next slide) in response to user interaction. All three are driven by the same underlying mechanism covered in full on JavaScript Behavior: data-bs-* attributes for markup-only wiring, and an equivalent new bootstrap.<Component>(…) JavaScript API for programmatic control. This page assumes that mechanism and focuses on what is specific to each of the three components.

Dropdowns

A dropdown pairs a toggle element with a menu that Bootstrap positions using Popper.js — the same positioning engine covered on Tooltips & Popovers, responsible for keeping the menu inside the viewport and flipping its placement when it would otherwise overflow:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Actions
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Edit</a></li>
    <li><a class="dropdown-item" href="#">Duplicate</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item text-danger" href="#">Delete</a></li>
  </ul>
</div>

data-bs-toggle="dropdown" is the only attribute required to open the menu — no data-bs-target is needed, since the menu is simply the toggle’s next sibling in the DOM. aria-expanded starts false and is flipped by Bootstrap’s JavaScript as the menu opens and closes, so it must be present in the initial markup even though its value is managed at runtime afterward.

Placement and variants

.dropstart, .dropend, and .dropup (applied to the outer .dropdown wrapper) change which side of the toggle the menu opens on, and .dropdown-menu-end right-aligns the menu against its toggle instead of the default left alignment:

<div class="dropup">
  <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">Opens upward</button>
  <ul class="dropdown-menu">...</ul>
</div>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">Right-aligned menu</button>
  <ul class="dropdown-menu dropdown-menu-end">...</ul>
</div>

A dropdown’s toggle does not have to be a <button> — a <a class="nav-link dropdown-toggle"> inside a navbar (see Navigation Components) uses the exact same data-bs-toggle="dropdown" mechanism.

Accordions

An accordion is a stack of collapsible panels, each built from an .accordion-item containing a header/button pair and a collapsible body — structurally, one accordion item is a styled wrapper around Bootstrap’s plain Collapse behavior:

<div class="accordion" id="faq-accordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse"
              data-bs-target="#faq-1" aria-expanded="true" aria-controls="faq-1">
        What is Bootstrap?
      </button>
    </h2>
    <div id="faq-1" class="accordion-collapse collapse show" data-bs-parent="#faq-accordion">
      <div class="accordion-body">
        A CSS/JS toolkit for building responsive, mobile-first sites.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#faq-2" aria-expanded="false" aria-controls="faq-2">
        Does it require jQuery?
      </button>
    </h2>
    <div id="faq-2" class="accordion-collapse collapse" data-bs-parent="#faq-accordion">
      <div class="accordion-body">
        No -- Bootstrap 5 uses vanilla JavaScript. See
        xref:web/bootstrap/javascript-behavior.adoc[JavaScript Behavior].
      </div>
    </div>
  </div>
</div>

data-bs-parent="#faq-accordion" on each .accordion-collapse is what makes the group exclusive — opening one panel automatically closes any other panel sharing the same parent. Omitting data-bs-parent (or giving each item a different one) allows multiple panels to stay open simultaneously, turning the same markup into a set of independent collapsibles rather than a true accordion.

The .collapsed class on the button and .show on the panel must be kept in sync with each other and with aria-expanded in the initial HTML — Bootstrap’s JavaScript updates all three together after the first interaction, but the page’s starting state (which panel, if any, opens by default) is the author’s responsibility to set correctly up front.

Carousels

A carousel cycles through a set of slides, each an .carousel-item inside .carousel-inner, with optional indicators and previous/next controls:

<div id="promo-carousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#promo-carousel" data-bs-slide-to="0"
            class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#promo-carousel" data-bs-slide-to="1"
            aria-label="Slide 2"></button>
  </div>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide-1.jpg" class="d-block w-100" alt="Description of slide 1">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide</h5>
        <p>Some representative placeholder content.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="slide-2.jpg" class="d-block w-100" alt="Description of slide 2">
    </div>
  </div>

  <button class="carousel-control-prev" type="button" data-bs-target="#promo-carousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#promo-carousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Exactly one .carousel-item must carry .active in the initial markup (the first slide shown); the carousel never infers a default on its own, and shipping none results in an empty carousel until the user or data-bs-ride triggers the first transition. data-bs-ride="carousel" on the outer element starts automatic cycling on page load; using data-bs-ride="true" instead only marks the carousel as ready to cycle without starting it immediately.

Autoplay and accessibility

Auto-cycling content is a known accessibility concern — WCAG requires a way to pause any content that moves, blinks, or auto-updates for more than five seconds. Bootstrap’s carousel automatically pauses on hover and on focus by default (data-bs-pause="hover"), but for content that isn’t purely decorative, explicitly offering a visible pause control (calling the JavaScript API’s .pause()/.cycle() from a button) is worth adding rather than relying on hover/focus pausing alone, since neither helps a screen-reader user who isn’t hovering or tabbing through the carousel’s own controls.

Common thread: the JavaScript component API

All three components above can be created and driven entirely from data-bs-* attributes, but every one also has a matching constructor for programmatic control — opening a dropdown on some event other than a click, jumping an accordion or carousel to a specific panel/slide from application code, and so on:

const dropdown = new bootstrap.Dropdown(document.getElementById("my-toggle"));
dropdown.show();

const carousel = new bootstrap.Carousel(document.getElementById("promo-carousel"));
carousel.to(1);   // jump to the second slide
carousel.pause();

See JavaScript Behavior for the full shape of that API — instance creation via getOrCreateInstance, the common method/event naming conventions, and how it differs from the data-bs-* markup-only approach used above. For the complete option/event reference of each component, see the official Dropdowns docs, the official Accordion docs, and the official Carousel docs.