Free Bootstrap 5 accordion snippet — Bootstrap 5 accordion with chevron up and down. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
1<section class="btc-accordion">
2 <!-- Container -->
3 <div class="container">
4 <h1 class="text-center text-white">Bootstrap 4 Accordion</h1>
5 <p class="text-center text-white">A Bootstrap 4 accordion with chevron up and down </p>
6 <hr> <br>
7 <!-- row -->
8 <div class="row">
9 <div class="col-md-12">
10 <div class="accordion mb-2" id="accordionExample">
11 <!-- Collapse one -->
12 <div class="card">
13 <div class="card-header" id="headingOne">
14 <a class="accordion-icon" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
15 <h5 class="py-2"> Collapsible Group Item #1 <span class="float-end"><i class="fas fa-angle-down"></i></span></h5>
16 </a>
17 </div>
18 <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
19 <div class="card-body">
20 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.
21 </div>
22 </div>
23 </div>
24 <!-- /Collapse one -->
25
26 <!-- Collapse Two -->
27 <div class="card">
28 <div class="card-header" id="headingTwo">
29 <a class="accordion-icon" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
30 <h5 class="py-2"> Collapsible Group Item #2 <span class="float-end"><i class="fas fa-angle-down"></i></span></h5>
31 </a>
32 </div>
33 <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
34 <div class="card-body">
35 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.
36 </div>
37 </div>
38 </div>
39 <!-- /Collapse Two -->
40
41 <!-- Collapse Three -->
42 <div class="card">
43 <div class="card-header" id="headingThree">
44 <a class="accordion-icon" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
45 <h5 class="py-2">Collapsible Group Item #3 <span class="float-end"><i class="fas fa-angle-down"></i></span></h5>
46 </a>
47 </div>
48 <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
49 <div class="card-body">
50 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.
51 </div>
52 </div>
53 </div>
54 <!-- /Collapse Three -->
55 </div>
56 </div>
57 </div>
58 <!-- /.row -->
59 </div>
60 <!-- /.container -->
61</section>
Bootstrap 5 accordion dropdown menu snippets
Bootstrap 5 accordion dropdown menu snippets: a hand-crafted, open-source Bootstrap 5 accordion. HTML, CSS & JS included, ready to copy.
Cool image accordion with pure CSS
Add a accordion to your UI with Cool image accordion with pure CSS. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
Bootstrap 5 Progress card with hover effect snippet
Bootstrap 5 Progress card with hover effect snippet: a hand-crafted, open-source Bootstrap 5 accordion. HTML & CSS included, ready to copy.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
13
Views
6
Likes
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.