Skip to content

Bootstrap Accordion Explained — Collapsible Content Sections

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Bootstrap Accordion Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap accordion builds on the collapse component to create vertically stacked collapsible sections, with support for single or multiple open panels.

What You'll Learn

  • Accordion structure
  • Single-open behavior
  • Always-open accordion
  • Flush accordion variant
  • Collapse component standalone

Why It Matters

Accordions organize content into expandable sections, saving vertical space on FAQs, documentation, and settings pages while keeping content accessible.

<div class="container mt-4">
  <div class="accordion" id="faqAccordion">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button" type="button" data-bs-toggle="collapse"
          data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          What is Bootstrap?
        </button>
      </h2>
      <div id="collapseOne" class="accordion-collapse collapse show"
        data-bs-parent="#faqAccordion">
        <div class="accordion-body">
          Bootstrap is a popular CSS framework for building responsive, mobile-first websites.
        </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="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          How do I install Bootstrap?
        </button>
      </h2>
      <div id="collapseTwo" class="accordion-collapse collapse"
        data-bs-parent="#faqAccordion">
        <div class="accordion-body">
          You can install Bootstrap via CDN, npm, or download the compiled files.
        </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="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          What are Bootstrap components?
        </button>
      </h2>
      <div id="collapseThree" class="accordion-collapse collapse"
        data-bs-parent="#faqAccordion">
        <div class="accordion-body">
          Bootstrap provides pre-built UI components like buttons, cards, navbars, and modals.
        </div>
      </div>
    </div>
  </div>

  <!-- Flush accordion -->
  <div class="accordion accordion-flush mt-4" id="flushAccordion">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" data-bs-toggle="collapse"
          data-bs-target="#flushOne">Flush Item 1</button>
      </h2>
      <div id="flushOne" class="accordion-collapse collapse" data-bs-parent="#flushAccordion">
        <div class="accordion-body">No borders or background.</div>
      </div>
    </div>
  </div>
</div>

Expected output: A single-open FAQ accordion with three items and a flush variant below, all with smooth collapse animations.

← Previous Bootstrap Modals Explained — Dialog and Overlay Components Next → Bootstrap Carousel Explained — Image Sliders and Slideshows

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap