FAQ
These sections provide answers to commonly asked questions.
Overview
"FAQ" components are sections on websites or applications that provide answers to commonly asked questions. They help users quickly find information, resolve issues, and understand the product or service better, improving user experience and reducing support inquiries.
Examples
Below are a few examples of “FAQ” sections.
Example 1
FAQs
Frequently Asked Questions
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
<section class="bg-body py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5">
<img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder+Image"
class="img-fluid rounded-4"
alt="FAQ Image"
/>
</div>
<div class="col-lg-6 offset-lg-1 mt-4 mt-lg-0">
<h1 class="text-primary fw-semibold fs-5 mb-2">FAQs</h1>
<h2 class="mb-3">Frequently Asked Questions</h2>
<div class="accordion accordion-flush" id="faqExample1" role="tablist">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne_ex1" aria-expanded="false" aria-controls="flush-collapseOne_ex1">
What is your return policy?
</button>
</h2>
<div id="flush-collapseOne_ex1" class="accordion-collapse collapse" data-bs-parent="#faqExample1">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo_ex1" aria-expanded="false" aria-controls="flush-collapseTwo_ex1">
How can I reset my password?
</button>
</h2>
<div id="flush-collapseTwo_ex1" class="accordion-collapse collapse" data-bs-parent="#faqExample1">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree_ex1" aria-expanded="false" aria-controls="flush-collapseThree_ex1">
Do you offer international shipping?
</button>
</h2>
<div id="flush-collapseThree_ex1" class="accordion-collapse collapse" data-bs-parent="#faqExample1">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour_ex1" aria-expanded="false" aria-controls="flush-collapseFour_ex1">
How can I track my order?
</button>
</h2>
<div id="flush-collapseFour_ex1" class="accordion-collapse collapse" data-bs-parent="#faqExample1">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row align-items-center"> <div class="col-lg-5"> <img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder+Image"
class="img-fluid rounded-4" alt="FAQ Image" /> </div> <div
class="col-lg-6 offset-lg-1 mt-4 mt-lg-0"> <h1 class="text-primary
fw-semibold fs-5 mb-2">FAQs</h1> <h2 class="mb-3">Frequently Asked
Questions</h2> <div class="accordion accordion-flush"
id="faqExample1" role="tablist"> <div
class="accordion-item"> <h2 class="accordion-header"> <button
class="accordion-button collapsed shadow-none" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseOne_ex1"
aria-expanded="false" aria-controls="flush-collapseOne_ex1"> What is your
return policy? </button> </h2> <div id="flush-collapseOne_ex1"
class="accordion-collapse collapse" data-bs-parent="#faqExample1">
<div class="accordion-body"> Lorem ipsum dolor sit amet consectet adipisi libero
corporis digniss provi elit. </div> </div> </div> <div
class="accordion-item"> <h2 class="accordion-header"> <button
class="accordion-button collapsed shadow-none" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo_ex1"
aria-expanded="false" aria-controls="flush-collapseTwo_ex1"> How can I
reset my password? </button> </h2> <div id="flush-collapseTwo_ex1"
class="accordion-collapse collapse" data-bs-parent="#faqExample1">
<div class="accordion-body"> Lorem ipsum dolor sit amet consectet adipisi libero
corporis digniss provi elit. </div> </div> </div> <div
class="accordion-item"> <h2 class="accordion-header"> <button
class="accordion-button collapsed shadow-none" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseThree_ex1"
aria-expanded="false" aria-controls="flush-collapseThree_ex1"> Do you
offer international shipping? </button> </h2> <div
id="flush-collapseThree_ex1" class="accordion-collapse collapse"
data-bs-parent="#faqExample1"> <div class="accordion-body"> Lorem
ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit. </div>
</div> </div> <div class="accordion-item"> <h2
class="accordion-header"> <button class="accordion-button collapsed
shadow-none" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFour_ex1" aria-expanded="false"
aria-controls="flush-collapseFour_ex1"> How can I track my order? </button>
</h2> <div id="flush-collapseFour_ex1" class="accordion-collapse
collapse" data-bs-parent="#faqExample1"> <div
class="accordion-body"> Lorem ipsum dolor sit amet consectet adipisi libero
corporis digniss provi elit. </div> </div> </div> </div> </div>
</div> </div> </section>
Example 2
Frequently Asked Questions
Lorem ipsum dolor sit amet consectet adipisi elit dolorum quibus, libero corporis dignis.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
<section class="bg-body py-5">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2 class="mb-2">Frequently Asked Questions</h2>
<p class="text-muted mb-3">Lorem ipsum dolor sit amet consectet adipisi elit dolorum quibus, libero corporis dignis.</p>
<button class="btn btn-lg btn-primary">Contact Us</button>
</div>
<div class="col-lg-6 mt-4 mt-lg-0">
<div class="accordion" id="faqExample2" role="tablist">
<div class="accordion-item border rounded mb-3">
<h2 class="accordion-header">
<button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne_ex2" aria-expanded="false" aria-controls="flush-collapseOne_ex2">
What is your return policy?
</button>
</h2>
<div id="flush-collapseOne_ex2" class="accordion-collapse collapse" data-bs-parent="#faqExample2">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
<div class="accordion-item border rounded mb-3">
<h2 class="accordion-header">
<button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo_ex2" aria-expanded="false" aria-controls="flush-collapseTwo_ex2">
How can I track my order?
</button>
</h2>
<div id="flush-collapseTwo_ex2" class="accordion-collapse collapse" data-bs-parent="#faqExample2">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
<div class="accordion-item border rounded mb-3">
<h2 class="accordion-header">
<button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree_ex2" aria-expanded="false" aria-controls="flush-collapseThree_ex2">
How can I reset my password?
</button>
</h2>
<div id="flush-collapseThree_ex2" class="accordion-collapse collapse" data-bs-parent="#faqExample2">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row"> <div class="col-lg-6"> <h2
class="mb-2">Frequently Asked Questions</h2> <p class="text-muted
mb-3">Lorem ipsum dolor sit amet consectet adipisi elit dolorum quibus, libero corporis
dignis.</p> <button class="btn btn-lg btn-primary">Contact
Us</button> </div> <div class="col-lg-6 mt-4 mt-lg-0"> <div
class="accordion" id="faqExample2" role="tablist"> <div
class="accordion-item border rounded mb-3"> <h2
class="accordion-header"> <button class="accordion-button collapsed rounded
shadow-none" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne_ex2" aria-expanded="false"
aria-controls="flush-collapseOne_ex2"> What is your return policy? </button>
</h2> <div id="flush-collapseOne_ex2" class="accordion-collapse
collapse" data-bs-parent="#faqExample2"> <div
class="accordion-body"> Lorem ipsum dolor sit amet consectet adipisi libero
corporis digniss provi elit. </div> </div> </div> <div
class="accordion-item border rounded mb-3"> <h2
class="accordion-header"> <button class="accordion-button collapsed rounded
shadow-none" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo_ex2" aria-expanded="false"
aria-controls="flush-collapseTwo_ex2"> How can I track my order? </button>
</h2> <div id="flush-collapseTwo_ex2" class="accordion-collapse
collapse" data-bs-parent="#faqExample2"> <div
class="accordion-body"> Lorem ipsum dolor sit amet consectet adipisi libero
corporis digniss provi elit. </div> </div> </div> <div
class="accordion-item border rounded mb-3"> <h2
class="accordion-header"> <button class="accordion-button collapsed rounded
shadow-none" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree_ex2" aria-expanded="false"
aria-controls="flush-collapseThree_ex2"> How can I reset my password?
</button> </h2> <div id="flush-collapseThree_ex2"
class="accordion-collapse collapse" data-bs-parent="#faqExample2">
<div class="accordion-body"> Lorem ipsum dolor sit amet consectet adipisi libero
corporis digniss provi elit. </div> </div> </div> </div> </div>
</div> </div> </section>
Example 3
FAQs
Frequently Asked Questions
Lorem ipsum dolor sit amet consectet adipisi elit dolorum quibus.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
<section class="bg-body py-5">
<div class="container">
<div class="text-md-center">
<h1 class="text-primary fw-semibold fs-5 mb-2">FAQs</h1>
<h2 class="mb-2">Frequently Asked Questions</h2>
<p class="text-muted mb-4">Lorem ipsum dolor sit amet consectet adipisi elit dolorum quibus.</p>
</div>
<div class="col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
<div class="accordion" id="faqExample3" role="tablist">
<div class="accordion-item border rounded mb-3">
<h2 class="accordion-header">
<button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne_ex3" aria-expanded="false" aria-controls="flush-collapseOne_ex3">
What is your return policy?
</button>
</h2>
<div id="flush-collapseOne_ex3" class="accordion-collapse collapse" data-bs-parent="#faqExample3">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
<div class="accordion-item border rounded mb-3">
<h2 class="accordion-header">
<button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo_ex3" aria-expanded="false" aria-controls="flush-collapseTwo_ex3">
How can I track my order?
</button>
</h2>
<div id="flush-collapseTwo_ex3" class="accordion-collapse collapse" data-bs-parent="#faqExample3">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
<div class="accordion-item border rounded mb-3">
<h2 class="accordion-header">
<button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree_ex3" aria-expanded="false" aria-controls="flush-collapseThree_ex3">
How can I reset my password?
</button>
</h2>
<div id="flush-collapseThree_ex3" class="accordion-collapse collapse" data-bs-parent="#faqExample3">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
<div class="accordion-item border rounded mb-3">
<h2 class="accordion-header">
<button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour_ex3" aria-expanded="false" aria-controls="flush-collapseFour_ex3">
What payment methods you accept?
</button>
</h2>
<div id="flush-collapseFour_ex3" class="accordion-collapse collapse" data-bs-parent="#faqExample3">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
<div class="accordion-item border rounded mb-3">
<h2 class="accordion-header">
<button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFive_ex3" aria-expanded="false" aria-controls="flush-collapseFive_ex3">
Do you offer international shipping?
</button>
</h2>
<div id="flush-collapseFive_ex3" class="accordion-collapse collapse" data-bs-parent="#faqExample3">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="text-md-center"> <h1 class="text-primary fw-semibold fs-5
mb-2">FAQs</h1> <h2 class="mb-2">Frequently Asked
Questions</h2> <p class="text-muted mb-4">Lorem ipsum dolor sit amet
consectet adipisi elit dolorum quibus.</p> </div> <div class="col-lg-8
offset-lg-2 col-xl-6 offset-xl-3"> <div class="accordion"
id="faqExample3" role="tablist"> <div class="accordion-item
border rounded mb-3"> <h2 class="accordion-header"> <button
class="accordion-button collapsed rounded shadow-none" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseOne_ex3"
aria-expanded="false" aria-controls="flush-collapseOne_ex3"> What is your
return policy? </button> </h2> <div id="flush-collapseOne_ex3"
class="accordion-collapse collapse" data-bs-parent="#faqExample3">
<div class="accordion-body"> Lorem ipsum dolor sit amet consectet adipisi libero
corporis digniss provi elit. </div> </div> </div> <div
class="accordion-item border rounded mb-3"> <h2
class="accordion-header"> <button class="accordion-button collapsed rounded
shadow-none" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo_ex3" aria-expanded="false"
aria-controls="flush-collapseTwo_ex3"> How can I track my order? </button>
</h2> <div id="flush-collapseTwo_ex3" class="accordion-collapse
collapse" data-bs-parent="#faqExample3"> <div
class="accordion-body"> Lorem ipsum dolor sit amet consectet adipisi libero
corporis digniss provi elit. </div> </div> </div> <div
class="accordion-item border rounded mb-3"> <h2
class="accordion-header"> <button class="accordion-button collapsed rounded
shadow-none" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree_ex3" aria-expanded="false"
aria-controls="flush-collapseThree_ex3"> How can I reset my password?
</button> </h2> <div id="flush-collapseThree_ex3"
class="accordion-collapse collapse" data-bs-parent="#faqExample3">
<div class="accordion-body"> Lorem ipsum dolor sit amet consectet adipisi libero
corporis digniss provi elit. </div> </div> </div> <div
class="accordion-item border rounded mb-3"> <h2
class="accordion-header"> <button class="accordion-button collapsed rounded
shadow-none" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFour_ex3" aria-expanded="false"
aria-controls="flush-collapseFour_ex3"> What payment methods you accept?
</button> </h2> <div id="flush-collapseFour_ex3"
class="accordion-collapse collapse" data-bs-parent="#faqExample3">
<div class="accordion-body"> Lorem ipsum dolor sit amet consectet adipisi libero
corporis digniss provi elit. </div> </div> </div> <div
class="accordion-item border rounded mb-3"> <h2
class="accordion-header"> <button class="accordion-button collapsed rounded
shadow-none" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFive_ex3" aria-expanded="false"
aria-controls="flush-collapseFive_ex3"> Do you offer international shipping?
</button> </h2> <div id="flush-collapseFive_ex3"
class="accordion-collapse collapse" data-bs-parent="#faqExample3">
<div class="accordion-body"> Lorem ipsum dolor sit amet consectet adipisi libero
corporis digniss provi elit. </div> </div> </div> </div> </div>
</div> </section>
Example 4
FAQs
Frequently Asked Questions
Lorem ipsum dolor sit amet consectet adipisi elit dolorum quibus.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
<section class="bg-body py-5">
<div class="container bg-secondary rounded-4 p-4 p-lg-5">
<div class="row align-items-center">
<div class="col-lg-6">
<h1 class="text-primary fw-semibold fs-5 mb-2">FAQs</h1>
<h2 class="mb-2">Frequently Asked Questions</h2>
<p class="mb-3">Lorem ipsum dolor sit amet consectet adipisi elit dolorum quibus.</p>
<button class="btn btn-lg btn-outline-secondary">Contact Us</button>
</div>
<div class="col-lg-6 mt-4 mt-lg-0">
<div class="accordion accordion-flush" id="faqExample4" role="tablist">
<div class="accordion-item bg-secondary">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-secondary rounded" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne_ex4" aria-expanded="false" aria-controls="flush-collapseOne_ex4">
What is your return policy?
</button>
</h2>
<div id="flush-collapseOne_ex4" class="accordion-collapse collapse" data-bs-parent="#faqExample4">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
<div class="accordion-item bg-secondary">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-secondary rounded" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo_ex4" aria-expanded="false" aria-controls="flush-collapseTwo_ex4">
How can I reset my password?
</button>
</h2>
<div id="flush-collapseTwo_ex4" class="accordion-collapse collapse" data-bs-parent="#faqExample4">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
<div class="accordion-item bg-secondary">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-secondary rounded" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree_ex4" aria-expanded="false" aria-controls="flush-collapseThree_ex4">
Do you offer international shipping?
</button>
</h2>
<div id="flush-collapseThree_ex4" class="accordion-collapse collapse" data-bs-parent="#faqExample4">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
<div class="accordion-item bg-secondary">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-secondary rounded" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour_ex4" aria-expanded="false" aria-controls="flush-collapseFour_ex4">
How can I track my order?
</button>
</h2>
<div id="flush-collapseFour_ex4" class="accordion-collapse collapse" data-bs-parent="#faqExample4">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container bg-secondary
rounded-4 p-4 p-lg-5"> <div class="row align-items-center"> <div
class="col-lg-6"> <h1 class="text-primary fw-semibold fs-5
mb-2">FAQs</h1> <h2 class="mb-2">Frequently Asked
Questions</h2> <p class="mb-3">Lorem ipsum dolor sit amet consectet
adipisi elit dolorum quibus.</p> <button class="btn btn-lg
btn-outline-secondary">Contact Us</button> </div> <div
class="col-lg-6 mt-4 mt-lg-0"> <div class="accordion accordion-flush"
id="faqExample4" role="tablist"> <div class="accordion-item
bg-secondary"> <h2 class="accordion-header"> <button
class="accordion-button collapsed bg-secondary rounded" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseOne_ex4"
aria-expanded="false" aria-controls="flush-collapseOne_ex4"> What is your
return policy? </button> </h2> <div id="flush-collapseOne_ex4"
class="accordion-collapse collapse" data-bs-parent="#faqExample4">
<div class="accordion-body"> Lorem ipsum dolor sit amet consectet adipisi libero
corporis digniss provi elit. </div> </div> </div> <div
class="accordion-item bg-secondary"> <h2 class="accordion-header">
<button class="accordion-button collapsed bg-secondary rounded"
type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo_ex4" aria-expanded="false"
aria-controls="flush-collapseTwo_ex4"> How can I reset my password? </button>
</h2> <div id="flush-collapseTwo_ex4" class="accordion-collapse
collapse" data-bs-parent="#faqExample4"> <div
class="accordion-body"> Lorem ipsum dolor sit amet consectet adipisi libero
corporis digniss provi elit. </div> </div> </div> <div
class="accordion-item bg-secondary"> <h2 class="accordion-header">
<button class="accordion-button collapsed bg-secondary rounded"
type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree_ex4" aria-expanded="false"
aria-controls="flush-collapseThree_ex4"> Do you offer international shipping?
</button> </h2> <div id="flush-collapseThree_ex4"
class="accordion-collapse collapse" data-bs-parent="#faqExample4">
<div class="accordion-body"> Lorem ipsum dolor sit amet consectet adipisi libero
corporis digniss provi elit. </div> </div> </div> <div
class="accordion-item bg-secondary"> <h2 class="accordion-header">
<button class="accordion-button collapsed bg-secondary rounded"
type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFour_ex4" aria-expanded="false"
aria-controls="flush-collapseFour_ex4"> How can I track my order? </button>
</h2> <div id="flush-collapseFour_ex4" class="accordion-collapse
collapse" data-bs-parent="#faqExample4"> <div
class="accordion-body"> Lorem ipsum dolor sit amet consectet adipisi libero
corporis digniss provi elit. </div> </div> </div> </div> </div>
</div> </div> </section>
Example 5
FAQs
Frequently Asked Questions
Lorem ipsum dolor sit amet consectet adipisi elit dolorum quibus, libero corporis dignis.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
<section class="bg-body py-5">
<div class="container">
<div class="text-center">
<h1 class="text-primary fw-semibold fs-5 mb-2">FAQs</h1>
<h2 class="mb-2">Frequently Asked Questions</h2>
<p class="text-muted mb-4">Lorem ipsum dolor sit amet consectet adipisi elit dolorum quibus, libero corporis dignis.</p>
</div>
<div class="row gx-3">
<div class="col-lg-6">
<div class="accordion" id="faqExample5a" role="tablist">
<div class="accordion-item border rounded mb-3">
<h2 class="accordion-header">
<button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne_ex5a" aria-expanded="false" aria-controls="flush-collapseOne_ex5a">
What is your return policy?
</button>
</h2>
<div id="flush-collapseOne_ex5a" class="accordion-collapse collapse">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
<div class="accordion-item border rounded mb-3">
<h2 class="accordion-header">
<button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo_ex5a" aria-expanded="false" aria-controls="flush-collapseTwo_ex5a">
How can I track my order?
</button>
</h2>
<div id="flush-collapseTwo_ex5a" class="accordion-collapse collapse">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
<div class="accordion-item border rounded mb-3">
<h2 class="accordion-header">
<button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree_ex5a" aria-expanded="false" aria-controls="flush-collapseThree_ex5a">
Do you offer international shipping?
</button>
</h2>
<div id="flush-collapseThree_ex5a" class="accordion-collapse collapse">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="accordion" id="faqExample5b" role="tablist">
<div class="accordion-item border rounded mb-3">
<h2 class="accordion-header">
<button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour_ex5b" aria-expanded="false" aria-controls="flush-collapseFour_ex5b">
How do I cancel my subscription?
</button>
</h2>
<div id="flush-collapseFour_ex5b" class="accordion-collapse collapse">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
<div class="accordion-item border rounded mb-3">
<h2 class="accordion-header">
<button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFive_ex5b" aria-expanded="false" aria-controls="flush-collapseFive_ex5b">
Is my personal information secure?
</button>
</h2>
<div id="flush-collapseFive_ex5b" class="accordion-collapse collapse">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
<div class="accordion-item border rounded mb-3">
<h2 class="accordion-header">
<button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSix_ex5b" aria-expanded="false" aria-controls="flush-collapseSix_ex5b">
How do I contact customer support?
</button>
</h2>
<div id="flush-collapseSix_ex5b" class="accordion-collapse collapse">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="text-center"> <h1 class="text-primary fw-semibold fs-5
mb-2">FAQs</h1> <h2 class="mb-2">Frequently Asked
Questions</h2> <p class="text-muted mb-4">Lorem ipsum dolor sit amet
consectet adipisi elit dolorum quibus, libero corporis dignis.</p> </div> <div
class="row gx-3"> <div class="col-lg-6"> <div
class="accordion" id="faqExample5a" role="tablist"> <div
class="accordion-item border rounded mb-3"> <h2
class="accordion-header"> <button class="accordion-button collapsed rounded
shadow-none" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne_ex5a" aria-expanded="false"
aria-controls="flush-collapseOne_ex5a"> What is your return policy? </button>
</h2> <div id="flush-collapseOne_ex5a" class="accordion-collapse
collapse"> <div class="accordion-body"> Lorem ipsum dolor sit amet
consectet adipisi libero corporis digniss provi elit. </div> </div> </div>
<div class="accordion-item border rounded mb-3"> <h2
class="accordion-header"> <button class="accordion-button collapsed rounded
shadow-none" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo_ex5a" aria-expanded="false"
aria-controls="flush-collapseTwo_ex5a"> How can I track my order? </button>
</h2> <div id="flush-collapseTwo_ex5a" class="accordion-collapse
collapse"> <div class="accordion-body"> Lorem ipsum dolor sit amet
consectet adipisi libero corporis digniss provi elit. </div> </div> </div>
<div class="accordion-item border rounded mb-3"> <h2
class="accordion-header"> <button class="accordion-button collapsed rounded
shadow-none" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree_ex5a" aria-expanded="false"
aria-controls="flush-collapseThree_ex5a"> Do you offer international shipping?
</button> </h2> <div id="flush-collapseThree_ex5a"
class="accordion-collapse collapse"> <div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit. </div>
</div> </div> </div> </div> <div class="col-lg-6">
<div class="accordion" id="faqExample5b" role="tablist">
<div class="accordion-item border rounded mb-3"> <h2
class="accordion-header"> <button class="accordion-button collapsed rounded
shadow-none" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFour_ex5b" aria-expanded="false"
aria-controls="flush-collapseFour_ex5b"> How do I cancel my subscription?
</button> </h2> <div id="flush-collapseFour_ex5b"
class="accordion-collapse collapse"> <div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit. </div>
</div> </div> <div class="accordion-item border rounded mb-3">
<h2 class="accordion-header"> <button class="accordion-button collapsed
rounded shadow-none" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFive_ex5b" aria-expanded="false"
aria-controls="flush-collapseFive_ex5b"> Is my personal information secure?
</button> </h2> <div id="flush-collapseFive_ex5b"
class="accordion-collapse collapse"> <div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit. </div>
</div> </div> <div class="accordion-item border rounded mb-3">
<h2 class="accordion-header"> <button class="accordion-button collapsed
rounded shadow-none" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseSix_ex5b" aria-expanded="false"
aria-controls="flush-collapseSix_ex5b"> How do I contact customer support?
</button> </h2> <div id="flush-collapseSix_ex5b"
class="accordion-collapse collapse"> <div class="accordion-body">
Lorem ipsum dolor sit amet consectet adipisi libero corporis digniss provi elit. </div>
</div> </div> </div> </div> </div> </div> </section>
ESC