Bootstrap 4 accordion - HTML & CSS snippet template

Published: 23.10.2019 | Last update: 11.11.2019

Organize content and information with the Bootstrap 4 Accordion. It is a perfect solution to create an overview of your content. Create sections with headers that you can show or hide using sophisticated cards. The vertical accordion is ideal for content-heavy web pages, whether you have texts, images, videos, or more.

The accordion was crafted with the latest Bootstrap 4. The card component is complemented with smooth and fluid animation. The “plus” and “minus” icons from Font Awesome indicates whether each section is expanded or collapsed.

If you liked this snippet, you might also enjoy exploring Bootstrap Countdown or Bootstrap Divider .

Please note that the interactive editor on this page should be viewed on your laptop or desktop for the best results.

See my free Bootstrap themes Edit this snippet

How to use the snippet

There are two ways to use the snippet:

a] Copy it into your project. This means:
1. Copy content of the HTML, CSS, JavaScript tabs into your project
2. Make sure that you have jQuery 3 and Bootstrap 4's CSS and JS included in your project too.
3. That should be it, and you should be good to go.
b] Use the "Edit in JSFiddle" link in the top right and play with it in the JSFiddle. After adjusting what you need, you can use the same steps as in a] to develop it locally.