Web Designer Wall

Snippets Accordion

Bootstrap 5 FAQ Accordion with Card Style Items

A card-style FAQ accordion where one answer opens at a time, with rounded items, a tinted state for the open question and a circular chevron. Built on the native Bootstrap accordion, so it is keyboard accessible by default.

Bootstrap 5 No jQuery Sep 2020 3.4K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 760px">
    <div class="text-center mb-4 mb-md-5">
      <span class="wdw-eyebrow">FAQ</span>
      <h1 class="display-6 wdw-heading mt-1 mb-2">Frequently asked questions</h1>
      <p class="wdw-muted mb-0">Everything you need to know before you get started.</p>
    </div>
    <div class="accordion faq-accordion" id="faqList">
        <div class="accordion-item faq-item">
          <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq0" aria-expanded="true" aria-controls="faq0">What is Bootstrap?</button>
          </h2>
          <div id="faq0" class="accordion-collapse collapse show" data-bs-parent="#faqList">
            <div class="accordion-body wdw-muted pt-0">Bootstrap is a front-end toolkit of ready-made components, utilities and a responsive grid. It lets you build consistent interfaces quickly without writing every style by hand.</div>
          </div>
        </div>
        <div class="accordion-item faq-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="false" aria-controls="faq1">How do I create a responsive website with Bootstrap?</button>
          </h2>
          <div id="faq1" class="accordion-collapse collapse" data-bs-parent="#faqList">
            <div class="accordion-body wdw-muted pt-0">Add the viewport meta tag, wrap content in a container, and lay it out with rows and columns. Breakpoint prefixes such as col-md-6 control how the layout changes on each screen size.</div>
          </div>
        </div>
        <div class="accordion-item faq-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2" aria-expanded="false" aria-controls="faq2">Does Bootstrap support all modern browsers?</button>
          </h2>
          <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqList">
            <div class="accordion-body wdw-muted pt-0">Yes. Bootstrap 5 supports the latest versions of Chrome, Firefox, Safari and Edge on desktop and mobile, and its components now run on plain JavaScript.</div>
          </div>
        </div>
        <div class="accordion-item faq-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3" aria-expanded="false" aria-controls="faq3">Can I use Bootstrap for mobile app development?</button>
          </h2>
          <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqList">
            <div class="accordion-body wdw-muted pt-0">Bootstrap is designed for the web, but it works well inside hybrid frameworks and progressive web apps where the interface is rendered in a browser view.</div>
          </div>
        </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More accordion snippets