→ Ankit khedkar
→ Accordion FAQ section

Accordion FAQ section

Minimal and with beautiful animation

This bootstrap css example is contributed by Ankit khedkar, on 24-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are Frequently asked questions, QnA,collapsible

Tags: FAQ Accordion

Author Ankit khedkar

5.9k

v.5.3

Fork Fullscreen

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <h2 class="mb-4">Frequently Asked Questions</h2>
            <div class="accordion" id="faqAccordion">
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="true" aria-controls="faq1">
                                What is your return policy?
                            </button>
                    </h2>
                    <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            We offer a 30-day return policy for all unused items in their original packaging.
                        </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="#faq2" aria-expanded="false" aria-controls="faq2">
                                How long does shipping take?
                            </button>
                    </h2>
                    <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            Shipping typically takes 3-5 business days for domestic orders and 7-14 days for
                            international orders.
                        </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="#faq3" aria-expanded="false" aria-controls="faq3">
                                Do you offer international shipping?
                            </button>
                    </h2>
                    <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            Yes, we ship to most countries worldwide. Shipping costs and delivery times may vary
                            depending on the destination.
                        </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="#faq4" aria-expanded="false" aria-controls="faq4">
                                How can I track my order?
                            </button>
                    </h2>
                    <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            Once your order ships, you'll receive a tracking number via email. You can use this
                            number to track your package on our website or the carrier's site.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

FAQ accordion
The accordion component is a vertically stacked set of items

Author:
Prajwal Hallale

1 year ago

3.3k

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

Author:
Moana silva

11 months ago

2.1k

v.4.6
Bootstrap 5.3 Accordion
Modern Bootstrap 5.3 Accordion

Author:
Prajwal Hallale

6 months ago

2.1k

v.5.3
Accordion example with Bootstrap 5.3

Author:
Ankit khedkar

11 months ago

4.3k

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Ankit khedkar

11 months ago

6.4k

v.5.3
Beautiful Bootstrap Accordion

Author:
Alaric Sloane

8 months ago

3.2k

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Anonymous

5 months ago

1.8k

v.5.3
Collapsible Sidebarteste

Author:
Bruno Dezan

3 months ago

2.2k

v.5.3
Feature showcase cards

Author:
Mateo Rojas

6 months ago

698

v.5.3
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

10 months ago

1.6k

v.4.6
Feature showcase
Feature showcase with icos

Author:
Anonymous

1 year ago

995

v.4.6
bootstrap 5 confirm modal

Author:
Anonymous

6 months ago

4.9k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent