How do I create an accordion FAQ section with Bootstrap?

Asked on Sep 14, 2025

1 Answer

To create an accordion FAQ section using Bootstrap 5, you can utilize the accordion component, which allows for collapsible content panels. Below is an example of how to set this up.

<!-- BEGIN COPY / PASTE -->
        <div class="accordion" id="faqAccordion">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <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" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        How do I use Bootstrap?
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        You can use Bootstrap by including its CSS and JS files in your project, either via CDN or by downloading them.
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        What are the benefits of using Bootstrap?
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        Bootstrap provides a responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
                    </div>
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

ADDITIONAL COMMENT:

The accordion component uses the "accordion" class to group items and "accordion-item" for each individual item.
Each accordion item contains a header ("accordion-header") and a button ("accordion-button") to toggle the collapse.

The "data-bs-toggle"
✅ Answered with Bootstrap 5 best practices.

← Back to All Questions