FAQ1

This bootstrap css example is contributed by Gana JNsksk, on 15-May-2026. Component is made with bootstrap css v.4.6. It is responsive. similar terms for this example are Frequently asked questions, QnA

Tags: FAQ

Author Gana JNsksk

328

v.4.6

Fork Fullscreen

<section>
        <div class="container py-5">
            
            <div class="text-center mb-5">
                <h2 class="section-title d-inline-block">Frequently Asked Questions</h2>
                <p class="text-muted mt-2">Find answers to common questions</p>
            </div>

<div class="row justify-content-center">
                <div class="col-lg-9">
                    <div class="accordion faq-card" id="faqAccordion">

<div class="accordion-item border-0 mb-3">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#faq1" aria-expanded="true" aria-controls="faq1">
                                    <i class="bi bi-question-circle me-3 text-primary"></i>
                                    How long does it take to build a website?
                                </button>
                            </h2>
                            <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    It usually takes 2 to 6 weeks depending on the complexity of the project. A simple
                                    business website can be completed in 2-3 weeks, while e-commerce or custom web
                                    applications may take 4-8 weeks.
                                </div>
                            </div>
                        </div>

<div class="accordion-item border-0 mb-3">
                            <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">
                                    <i class="bi bi-question-circle me-3 text-primary"></i>
                                    Do you provide website maintenance after launch?
                                </button>
                            </h2>
                            <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Yes, we offer monthly maintenance packages that include updates, security patches,
                                    backups, and minor content changes to keep your website running smoothly.
                                </div>
                            </div>
                        </div>

<div class="accordion-item border-0 mb-3">
                            <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">
                                    <i class="bi bi-question-circle me-3 text-primary"></i>
                                    How much does a website cost?
                                </button>
                            </h2>
                            <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Our website packages start from $500. The final price depends on your requirements
                                    such
                                    as number of pages, features, e-commerce functionality, and custom design needs. We
                                    provide a detailed quote after discussion.
                                </div>
                            </div>
                        </div>

<div class="accordion-item border-0 mb-3">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#faq4" aria-expanded="false" aria-controls="faq4">
                                    <i class="bi bi-question-circle me-3 text-primary"></i>
                                    Do you provide mobile-friendly (responsive) websites?
                                </button>
                            </h2>
                            <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Absolutely. All websites we build are fully responsive and optimized for mobile,
                                    tablet,
                                    and desktop devices to ensure the best user experience across all screen sizes.
                                </div>
                            </div>
                        </div>

<div class="accordion-item border-0 mb-3">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#faq5" aria-expanded="false" aria-controls="faq5">
                                    <i class="bi bi-question-circle me-3 text-primary"></i>
                                    What is your payment structure?
                                </button>
                            </h2>
                            <div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    We usually follow a 40% - 30% - 30% payment structure:<br>
                                    • 40% at project start<br>
                                    • 30% after design approval<br>
                                    • 30% after project delivery
                                </div>
                            </div>
                        </div>

</div>
                </div>
            </div>
        </div>
    </section>

More Examples

FAQ #1

Author:
java stories story

1 year ago

1.6k

v.5.3
FAQ example with bootstrap 4
Simple Frequently Asked Questions section

Author:
Moana silva

2 years ago

4.8k

v.4.6
faq section
copy koiro na

Author:
Fitar Ahmed

3 months ago

858

v.4.6
Service section

Author:
Md. Hasibur Rahman

1 month ago

149

v.4.6
about us
“This section is used for company introduction”

Author:
MD Saidul Hasan

3 months ago

212

v.4.6
Personal Portfolio Service Section

Author:
Creative Araf

2 months ago

256

v.5.3
Accordion FAQ section
Minimal and with beautiful animation

Author:
Ankit khedkar

2 years ago

11.1k

v.5.3
E-Commerce Full

Author:
Zahid Hasan Riyad

1 month ago

320

v.5.3
FAQ accordion
The accordion component is a vertically stacked set of items

Author:
Prajwal Hallale

2 years ago

6.4k

v.5.3
responsive footer
responsive footer with date and time

Author:
SHOURAV ISLAM

3 months ago

270

v.4.6
Newsletter Form
Rounded newsletter form

Author:
Ross Wille

2 years ago

4k

v.5.3
Music Player
Working music player With start top buttons and progress bar

Author:
Anonymous

7 months ago

690

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent