Accordion FAQ

1<div class="container py-5" style="max-width:720px;">
2  <div class="text-center mb-5">
3    <h2 class="fw-bold">Frequently Asked Questions</h2>
4    <p class="text-muted">Everything you need to know about the product.</p>
5  </div>
6  <div class="accordion accordion-flush" id="faqAccordion">
7    <div class="accordion-item border rounded-3 mb-2 overflow-hidden">
8      <h2 class="accordion-header">
9        <button class="accordion-button fw-semibold" type="button"
10          data-bs-toggle="collapse" data-bs-target="#faq1">
11          What is Bootstrap 5 and why should I use it?
12        </button>
13      </h2>
14      <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
15        <div class="accordion-body text-muted">
16          Bootstrap 5 is the world's most popular front-end open-source toolkit. It features Sass variables, a responsive grid, and dozens of prebuilt components — all with no jQuery dependency.
17        </div>
18      </div>
19    </div>
20    <div class="accordion-item border rounded-3 mb-2 overflow-hidden">
21      <h2 class="accordion-header">
22        <button class="accordion-button collapsed fw-semibold" type="button"
23          data-bs-toggle="collapse" data-bs-target="#faq2">
24          Are these snippets free to use in commercial projects?
25        </button>
26      </h2>
27      <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
28        <div class="accordion-body text-muted">
29          Yes! All snippets on GoSnippets are released under the MIT licence. You're free to use them in personal or commercial projects without attribution.
30        </div>
31      </div>
32    </div>
33    <div class="accordion-item border rounded-3 mb-2 overflow-hidden">
34      <h2 class="accordion-header">
35        <button class="accordion-button collapsed fw-semibold" type="button"
36          data-bs-toggle="collapse" data-bs-target="#faq3">
37          How do I copy and use a snippet?
38        </button>
39      </h2>
40      <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
41        <div class="accordion-body text-muted">
42          Click the "Copy" button on any snippet card. The full HTML (and CSS/JS if applicable) is copied to your clipboard. Paste it directly into your project alongside Bootstrap 5 CSS and JS.
43        </div>
44      </div>
45    </div>
46    <div class="accordion-item border rounded-3 overflow-hidden">
47      <h2 class="accordion-header">
48        <button class="accordion-button collapsed fw-semibold" type="button"
49          data-bs-toggle="collapse" data-bs-target="#faq4">
50          Can I submit my own snippets?
51        </button>
52      </h2>
53      <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
54        <div class="accordion-body text-muted">
55          Absolutely! We welcome community contributions. Use the "Submit Snippet" button to share your Bootstrap components with thousands of developers worldwide.
56        </div>
57      </div>
58    </div>
59  </div>
60</div>