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

308

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