Open In App

How to create a FAQ Section in Bootstrap ?

Last Updated : 13 Feb, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

An FAQ(Frequently Asked Questions) section serves as a valuable resource for users, providing them with the information they need in a convenient and accessible manner while also benefiting the organization by reducing support overhead and enhancing user satisfaction.

Using Accordion Component

The Accordion component organizes FAQ items into collapsible panels, allowing users to expand only the question they want to see the answer to. This approach conserves space and provides a neat user interface.

Example: The below code implements the bootstrap accordion to create a FAQ section on the web page.

HTML




<!doctype html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <title>Accordion</title>
    <link rel="stylesheet" href=
        crossorigin="anonymous" integrity=
"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN">
</head>
 
<body>
    <div class=
"container rounded h-75 w-50 m-5 p-5 text-light bg-success">
        <h1>FAQ</h1>
        <div class="accordion" id="accordionExample">
            <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 GeeksforGeeks used for?
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show"
                    data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <strong>GeeksforGeeks</strong>
                        is a leading platform that provides computer science resources
                        and coding challenges for programmers and technology enthusiasts,
                        along with interview and exam preparations for upcoming aspirants.
                    </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">
                        Who is the founder of GeeksforGeeks?
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse"
                    data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <strong>
                            Sandeep Jain is the founder at GeeksforGeeks.
                        </strong>
                        He is an alumini of Indian Institute of Technology Roorkee.
                        His platform GeeksforGeeks is well recognized among all the
                        engineering students throughout all colleges in India.
                    </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">
                        When was GeeksforGeeks created?
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse"
                    data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <strong>
                            GeeksForGeeks was founded in 2009.
                        </strong>
                        Where is the global headquarters of GeeksForGeeks?
                        Global headquarters for GeeksForGeeks is located in Noida,
                        Uttar Pradesh,India.
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    <script src=
        integrity=
"sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous">
    </script>
</body>
 
</html>


Output:

accord1

GIF of Accordion Component – Example 1

Collapsible Panels

Bootstrap’s collapsible panels offer a straightforward approach to presenting FAQ content. Each question serves as a trigger to reveal its corresponding answer when clicked, ensuring a clear and concise layout. The collapse JavaScript plugin is used to show and hide content.

Example: The below code implements the collapsible panels to create FAQ section using Boorstrap.

HTML




<!doctype html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Collapsible Panels</title>
    <link rel="stylesheet" href=
        crossorigin="anonymous" integrity=
"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN">
</head>
 
<body>
    <div class=
"container rounded h-75 w-50 m-5 p-5 text-light bg-success">
        <h1>FAQ</h1>
        <p class="d-inline-flex gap-1 ">
            <a class="btn btn-primary" data-bs-toggle="collapse"
                href="#collapseExample" role="button"
                aria-expanded="false" aria-controls="collapseExample">
                What is Programming
            </a>
            <button class="btn btn-primary" type="button"
                data-bs-toggle="collapse" data-bs-target="#collapseExample"
                aria-expanded="false" aria-controls="collapseExample">
                Check
            </button>
        </p>
        <div class="collapse" id="collapseExample">
            <div class="card card-body text-black">
                Programming is the process of writing code to tell a
                computer how to perform tasks. It involves humans
                working with computers to create instructions in a
                language that computers can understand.
            </div>
        </div>
    </div>
        <script src=
            integrity=
"sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
            crossorigin="anonymous">
        </script>
</body>
 
</html>


Output:

collap1

GIF of Collapsible Panels Component – Example 1

Card-Based Layout

Utilizing Bootstrap’s card component, you can create an aesthetically pleasing FAQ section where each question and answer pair is presented within a distinct card. This approach offers flexibility in design and customization.

Example: The below code example is a practical implementation of Card layout to create a FAQ section.

HTML




<!doctype html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Card-Based Layout</title>
    <link rel="stylesheet" href=
        crossorigin="anonymous" integrity=
"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN">
</head>
 
<body>
    <div class=
"container rounded h-75 w-25 m-5 p-5 text-light bg-success">
        <h1>FAQ</h1>
        <div class="card" style="width: 18rem;">
            <div class="card-body">
                <h5 class="card-title">What is UPI?</h5>
                <p class="card-text">
                    Unified Payments Interface (UPI) is a real-time payment
                    system that allows users to send and receive money from
                    one bank account to another instantly and for free.
                </p>
                <a href="#" class="card-link">Read More</a>
                <a href="#" class="card-link">Website</a>
            </div>
        </div>
    </div>
    <script src=
        integrity=
"sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous">
    </script>
</body>
 
</html>


Output:

card2

GIF of Card Component – Example 2



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads