<section class="py-20 bg-light overflow-hidden">
<div class="container">
<h2 class="mb-16">FAQs</h2>
<div class="accordion" id="accordionExample">
<div class="accordion-item mb-4 pe-8 pe-md-12 py-4 bg-light-light">
<div class="border-start border-2 border-info">
<h2 class="accordion-header ps-8 ps-md-16 ps-md-28" id="headingOne">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="lead fw-bold">Sed eget accumsan ipsum. Praesent dignissim?</span>
</button>
</h2>
<div class="accordion-collapse collapse" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p class="ps-8 ps-md-16 ps-lg-28 mw-4xl mt-4 text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
</div>
</div>
</div>
</div>
<div class="accordion-item mb-4 pe-8 pe-md-12 py-4 bg-light-light">
<div class="border-start border-2 border-info">
<h2 class="accordion-header ps-8 ps-md-16 ps-md-28" id="headingOne">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="lead fw-bold text-info">After curabitur eu laoreet libero eget en vel odio?</span>
</button>
</h2>
<div class="accordion-collapse collapse show" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p class="ps-8 ps-md-16 ps-lg-28 mw-4xl mt-4 text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
</div>
</div>
</div>
</div>
<div class="accordion-item mb-4 pe-8 pe-md-12 py-4 bg-light-light">
<div class="border-start border-2 border-info">
<h2 class="accordion-header ps-8 ps-md-16 ps-md-28" id="headingOne">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="lead fw-bold">A eget euismod dignissim, felis tortor mollis eros, non ultricies turpis eget leo?</span>
</button>
</h2>
<div class="accordion-collapse collapse" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p class="ps-8 ps-md-16 ps-lg-28 mw-4xl mt-4 text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
</div>
</div>
</div>
</div>
<div class="accordion-item pe-8 pe-md-12 py-4 bg-light-light">
<div class="border-start border-2 border-info">
<h2 class="accordion-header ps-8 ps-md-16 ps-md-28" id="headingOne">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="lead fw-bold">Curabitur elementum eu metus ut consequat?</span>
</button>
</h2>
<div class="accordion-collapse collapse" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p class="ps-8 ps-md-16 ps-lg-28 mw-4xl mt-4 text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
</div>
</div>
</div>
</div>
</div>
<div class="mt-20 text-center"><a class="btn btn-info" href="#">More</a></div>
</div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- Alert 5
- Application 38
- Banner 10
- Blog 43
- Call to action 75
- Contact 23
- Content 4
- Content 45
- Cookies 31
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 29
- Features 108
- Footer 27
- Footers 10
- Graphs 9
- HTTP codes 32
- Headers 75
- How it works 29
- Logo clouds 51
- Modals 3
- Navbar 40
- Navigation (horizontal) 63
- Navigation (vertical) 4
- Newsletter 31
- Portfolio 29
- Pricing 25
- Projects 9
- Reviews 5
- Sign in / Sign up 55
- Stats 45
- Tables 25
- Team 24
- Testimonials 25
- Users 8
The frequently asked questions section is used to present answers to frequently asked questions. Bootstrap FAQ components will allow you to show them in an aesthetic and clear way.
Choose from many variations of the Bootstrap components FAQ. The variants shown here are available in various UI libraries in the Shuffle editor. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Bootstrap website template. Each library is designed by a professional designer and coded by our team of developers.
Get access to all sections of the Bootstrap components FAQ, code and our editor. Try the demo for free.
Component #1
