Skip to content
  • No data uploaded
  • Instant results
UI Component Generator

Bootstrap 5 FAQ Accordion for React

A production-ready minimal faq accordion: a frequently-asked-questions section with four expandable items, each toggled by a button that exposes its state via aria-expanded. Pick your brand color, toggle dark mode and corner radius — the live preview and the React code update instantly in your browser.

Live component editor

Library
ReactVueHTML
Framework
TailwindBootstrap
Style
MinimalGlass
Theme
Corner radius
Live preview 
import 'bootstrap/dist/css/bootstrap.min.css';
import './theme.css';
import { useState } from 'react';

export default function FaqAccordion() {
  const [q1, setQ1] = useState(true);
  const [q2, setQ2] = useState(false);
  const [q3, setQ3] = useState(false);
  const [q4, setQ4] = useState(false);

  return (
    <section className="px-4 py-5">
      <div className="mw-2xl mx-auto">
        <h2 className="fs-3 fw-bold text-center text-body-emphasis">Frequently asked questions</h2>
        <div className="mt-5 d-flex flex-column gap-2">
          <div className="bg-body border shadow-sm rounded-3">
            <button type="button" className="w-100 d-flex align-items-center justify-content-between gap-3 px-3 py-3 text-start fw-semibold text-body-emphasis" aria-controls="faq-a1" onClick={() => setQ1((v) => !v)} aria-expanded={q1}>
              <span>Can I cancel anytime?</span><span className="fs-5 fw-bold text-brand" aria-hidden="true">+</span>
            </button>
            <div id="faq-a1" hidden={!q1}>
              <p className="px-3 pb-3 small lh-lg text-body-secondary">Yes. Cancel from your billing page and you keep access until the end of the period.</p>
            </div>
          </div>
          <div className="bg-body border shadow-sm rounded-3">
            <button type="button" className="w-100 d-flex align-items-center justify-content-between gap-3 px-3 py-3 text-start fw-semibold text-body-emphasis" aria-controls="faq-a2" onClick={() => setQ2((v) => !v)} aria-expanded={q2}>
              <span>Do you offer a free trial?</span><span className="fs-5 fw-bold text-brand" aria-hidden="true">+</span>
            </button>
            <div id="faq-a2" hidden={!q2}>
              <p className="px-3 pb-3 small lh-lg text-body-secondary">Every paid plan starts with a 14-day free trial — no credit card required.</p>
            </div>
          </div>
          <div className="bg-body border shadow-sm rounded-3">
            <button type="button" className="w-100 d-flex align-items-center justify-content-between gap-3 px-3 py-3 text-start fw-semibold text-body-emphasis" aria-controls="faq-a3" onClick={() => setQ3((v) => !v)} aria-expanded={q3}>
              <span>Which payment methods do you accept?</span><span className="fs-5 fw-bold text-brand" aria-hidden="true">+</span>
            </button>
            <div id="faq-a3" hidden={!q3}>
              <p className="px-3 pb-3 small lh-lg text-body-secondary">All major cards, UPI, netbanking and invoicing for annual plans.</p>
            </div>
          </div>
          <div className="bg-body border shadow-sm rounded-3">
            <button type="button" className="w-100 d-flex align-items-center justify-content-between gap-3 px-3 py-3 text-start fw-semibold text-body-emphasis" aria-controls="faq-a4" onClick={() => setQ4((v) => !v)} aria-expanded={q4}>
              <span>Is my data secure?</span><span className="fs-5 fw-bold text-brand" aria-hidden="true">+</span>
            </button>
            <div id="faq-a4" hidden={!q4}>
              <p className="px-3 pb-3 small lh-lg text-body-secondary">Data is encrypted in transit and at rest, and we never sell personal information.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

More Bootstrap components for React

All components →

Free Bootstrap 5 FAQ Accordion for React by pGento

Install Bootstrap 5 for React

Create a React project with Vite and install Bootstrap:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm install bootstrap

Save the generated theme.css next to the component; the component file already imports bootstrap/dist/css/bootstrap.min.css and ./theme.css. No Bootstrap JavaScript is required — interactivity uses useState.

Use the faq accordion in React

// App.jsx
import FaqAccordion from './FaqAccordion';

export default function App() {
  return <FaqAccordion />;
}

Accessibility & customization

Each question is a <button> with aria-expanded and aria-controls pointing at its answer panel, so screen readers announce open/closed state and keyboard users can operate it with Enter or Space.

Every color, radius and dark-mode choice is baked into plain Bootstrap classes plus a tiny CSS-variable theme file, so the copied code has no runtime dependency on this site.

Compatibility

ItemDetails
CSS frameworkBootstrap 5.3+ (CSS only)
LibraryReact 18+ (function component)
Interactive stateq1, q2, q3, q4
Dark modeYes — toggle in the editor
StyleMinimal

Frequently asked questions

How do I install this Bootstrap faq accordion in React?
Create a React project, install Bootstrap 5 as shown in the installation section, then paste the generated code. Also save the generated theme.css file.
Can I change the color of the faq accordion?
Yes. Use the brand color picker or type any hex code — the preview and code update instantly, and the color is written directly into the classes you copy.
Does the faq accordion support dark mode?
Yes. Toggle “Dark mode” in the editor to generate a dark palette version of the same component.
Is the faq accordion accessible?
Each question is a <button> with aria-expanded and aria-controls pointing at its answer panel, so screen readers announce open/closed state and keyboard users can operate it with Enter or Space.
Is this component free for commercial use?
Yes. The generated code is yours to use in personal and commercial projects without attribution.
Bootstrap 5 FAQ Accordion for React

Embed this tool on your site

Paste this code into any web page. It stays free, fast and ad-free inside your site.

Print or save as PDF

Prints just this tool and its result. Choose “Save as PDF” as the printer to get a file. Branding is stored only in this browser.