FAQ #1

This bootstrap css example is contributed by java stories story, on 13-Aug-2025. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are Frequently asked questions, QnA

Tags: FAQ

Author java stories story

1.1k

v.5.3

Fork Fullscreen

<section class="container my-5" id="faq">
        <h2 class="text-center mb-4">FAQ - Pertanyaan yang Sering Diajukan</h2>

<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">
                        Bagaimana cara memesan produk?
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        Anda dapat memesan produk melalui website kami dengan menambahkan produk ke keranjang belanja, lalu ikuti langkah-langkah checkout.
                    </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">
                        Apakah ada biaya pengiriman?
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        Biaya pengiriman akan dihitung saat checkout berdasarkan lokasi pengiriman dan berat produk.
                    </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">
                        Metode pembayaran apa saja yang diterima?
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        Kami menerima pembayaran melalui transfer bank, kartu kredit, dan e-wallet.
                    </div>
                </div>
            </div>

</div>
    </section>

More Examples

FAQ example with bootstrap 4
Simple Frequently Asked Questions section

Author:
Moana silva

1 year ago

3.8k

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

Author:
Prajwal Hallale

1 year ago

5.2k

v.5.3
Accordion FAQ section
Minimal and with beautiful animation

Author:
Ankit khedkar

1 year ago

9k

v.5.3
Newsletter CTA Section with Bootstrap 5
Clean and elegant Newsletter form

Author:
Anonymous

1 year ago

2.1k

v.5.3
Interactive Service Cards | Bootstrap 5.3
Modern Bootstrap 5.3 component with elegant card rotations and hover animations. Perfect for featuring services, products, or team members

Author:
Anonymous

1 year ago

7.1k

v.5.3
Expanding Cards
Expanding Cards

Author:
Rami AlAjo

11 months ago

4k

v.4.6
Mobile App Landing Fage template
Free mobile app landing page template with Bootstrap

Author:
Asmath

1 year ago

1.5k

v.5.3
Professional Staff Profile Cards with Social Integration

Author:
Isaac Winslow

1 year ago

4.3k

v.5.3
Hidden Search Widget
Hidden Search Widget

Author:
Rami AlAjo

11 months ago

1.2k

v.4.6
Gradient Hero Section
A visually stunning hero section with a gradient background and a call-to-action button.

Author:
Prajwal Hallale

1 year ago

4.8k

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

1 year ago

2.9k

v.4.6
Bootstrap tabs
tab navigation

Author:
Anonymous

1 year ago

24.3k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent