Bootstrap accordion: A Bootstrap accordion is a component that organizes content within collapsable items. It allows the display of only one collapsed item at a time. Accordions can toggle through a number of text blocks with a single click, and that greatly enhances the UX of your project.
To create a Bootstrap accordion, you need to wrap your content in a .accordion element. Then, each collapsable item should be wrapped in a .card element. The header of the collapsable item should be wrapped in a .card-header element, and the body of the collapsable item should be wrapped in a .card-body element.
Bootstrap Accordions are a popular component used in websites and applications to organize and display information in a collapsible and expandable format. They are often used to group related content, such as frequently asked questions, product features, or service offerings.
Some of the benefits of using Bootstrap Accordions include:
- Improved User Experience
- Space-Saving
- Easy to Implement
- Responsive Design
#Bootstrap Accordions 1
| Author | Rokr |
| Demo Link | Published |
| Dependencies | ionicons.css, jquery.js, popper.js |
| Made with | HTML / CSS / JS |
| Demo Link | Check Demo |
| Compatible browsers | Chrome, Edge, Firefox, Opera, Safari |
| Responsive | Yes |
| Bootstrap version | Published |
#Bootstrap Accordions 2
If you are unsure about the design, stick to simplicity and cleanness with this free simple accordion widget. The snippet works well for frequently asked questions, but you can use it for something else, too.
| Author | Colorlib |
| Published | 2022 |
| Dependencies | ionicons.css, jquery.js, popper.js |
| Made with | HTML / CSS / JS |
| Demo Link | Check Demo |
| Compatible browsers | Chrome, Edge, Firefox, Opera, Safari |
| Responsive | Yes |
| Bootstrap version | Published |
| License | CC BY 3.0 |
#Bootstrap Accordions 3
Display information in a collapsible fashion with this plus and minus sign accordion template. Instead of working on it from the ground up, utilize this free snippet now and save time.
| Author | Colorlib |
| Published | 2022 |
| Dependencies | ionicons.css, jquery.js, popper.js |
| Made with | HTML / CSS / JS |
| Demo Link | Check Demo |
| Compatible browsers | Chrome, Edge, Firefox, Opera, Safari |
| Responsive | Yes |
| Bootstrap version | Published |
| License | CC BY 3.0 |
#Bootstrap Accordions 4
Follow the modern trends with this free rounded accordion template for FAQ, but you can alter it to something else, too. It is easy to use and embed into your application to provide your users with more information conveniently.
| Author | Colorlib |
| Published | 2022 |
| Dependencies | ionicons.css, jquery.js, popper.js |
| Made with | HTML / CSS / JS |
| Demo Link | Check Demo |
| Compatible browsers | Chrome, Edge, Firefox, Opera, Safari |
| Responsive | Yes |
| Bootstrap version | Published |
| License | CC BY 3.0 |
#Bootstrap Accordions 5
| Author | Colorlib |
| Published | 2022 |
| Dependencies | ionicons.css, jquery.js, popper.js |
| Made with | HTML / CSS / JS |
| Demo Link | Check Demo |
| Compatible browsers | Chrome, Edge, Firefox, Opera, Safari |
| Responsive | Yes |
| Bootstrap version | Published |
| License | CC BY 3.0 |
#Bootstrap Accordions 6
| Author | grafreez |
| Published | |
| Dependencies | font-awesome.css, jquery.js |
| Made with | HTML / CSS / JS |
| Demo Link | Check Demo |
| Compatible browsers | Chrome, Edge, Firefox, Opera, Safari |
| Responsive | Yes |
| Bootstrap version | 4.0.0 |
| License | CC BY 3.0 |
#Bootstrap Accordions 7
| Author | grafreez |
| Published | |
| Dependencies | font-awesome.css, jquery.js |
| Made with | HTML / CSS / JS |
| Demo Link | Check Demo |
| Compatible browsers | Chrome, Edge, Firefox, Opera, Safari |
| Responsive | Yes |
| Bootstrap version | 3.3.6 |
| License | CC BY 3.0 |
#Bootstrap Accordions 8
| Author | bestjquery |
| Published | |
| Dependencies | font-awesome.css, jquery.js |
| Made with | HTML / CSS / JS |
| Demo Link | Check Demo |
| Compatible browsers | Chrome, Edge, Firefox, Opera, Safari |
| Responsive | Yes |
| Bootstrap version | 3.3.6 |
| License | CC BY 3.0 |
#Bootstrap Accordions 9
| Author | bestjquery |
| Published | |
| Dependencies | font-awesome.css, jquery.js |
| Made with | HTML / CSS / JS |
| Demo Link | Check Demo |
| Compatible browsers | Chrome, Edge, Firefox, Opera, Safari |
| Responsive | Yes |
| Bootstrap version | 3.3.6 |
| License | CC BY 3.0 |
#Bootstrap Accordions 10
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.
| Author | Ondrej |
| Published | |
| Dependencies | bootstrap.css, font-awesome.css, bootstrap.js, jquery.js |
| Made with | HTML / CSS / JS |
| Demo Link | Check Demo |
| Compatible browsers | Chrome, Edge, Firefox, Opera, Safari |
| Responsive | Yes |
| Bootstrap version | 4.3.1 |
| License | CC BY 3.0 |
#Bootstrap Accordions 11
| Author | Ondrej |
| Published | |
| Dependencies | bootstrap.css, font-awesome.css, bootstrap.js, jquery.js |
| Made with | HTML / CSS / JS |
| Demo Link | Check Demo |
| Compatible browsers | Chrome, Edge, Firefox, Opera, Safari |
| Responsive | Yes |
| Bootstrap version | |
| License | CC BY 3.0 |
#Bootstrap Accordions 12
| Author | bbbootstrap |
| Published | |
| Dependencies | bootstrap.css, font-awesome.css, bootstrap.js, jquery.js |
| Made with | HTML / CSS / JS |
| Demo Link | Check Demo |
| Compatible browsers | Chrome, Edge, Firefox, Opera, Safari |
| Responsive | Yes |
| Bootstrap version | 4 |
| License | CC BY 3.0 |
Links: Source Code / Demo
#Bootstrap Accordions 13
Collapsible tabs (Bootstrap accordion) easy to use as a plugin- easy to implement need only bootstrap js & the master jquery file
Author: Nishant Dogra (mrdogra007)
Links: Source Code / Demo
Created on: November 29, 2017
Made with: HTML, CSS, JS
Tags: accordion, collapsible tabs, css, bootstrap
#Bootstrap Accordions 14
bootstrap Accordion with jquery
Author: Aashima (Aashima)
Links: Source Code / Demo
Created on: September 1, 2017
Made with: HTML, CSS
Tags: toggle, jquery, our, responsive, animation
#Bootstrap Accordions 15
Links: Source Code / Demo
#Bootstrap Accordions 16
Links: Source Code / Demo
#Bootstrap Accordions 17
Links: Source Code / Demo
#Bootstrap Accordions 18
Links: Source Code / Demo
#Bootstrap Accordions 19
Links: Source Code / Demo
#Bootstrap Accordions 20
Links: Source Code / Demo
#Bootstrap Accordions 21
Links: Source Code / Demo
Made with: HTML, CSS
Tags: 4.1.1, accordion
#Bootstrap Accordions 22
Author: rajeshdn (cool_lazyboy)
Links: Source Code / Demo
Created on: September 9, 2019
Made with: HTML, CSS, JS
#Bootstrap Accordions 23
What it says on the tin. You can use this without JS and it works fine, except for the closing animation.
Author: Kam Black (kamblack)
Links: Source Code / Demo
Created on: July 16, 2018
Made with: HTML, SCSS, JS
Tags: details, summary, accordion, css
#Bootstrap Accordions 24
Links: Source Code / Demo
Made with: HTML, CSS, JS
Tags: 3.3.0, jQuery, user, social, profile, jquery, contact, accordion
#Bootstrap Accordions 25
Links: Source Code / Demo
Made with: HTML, CSS
Tags: 3.3.0, accordion
#Bootstrap Accordions 26
Links: Source Code / Demo
Made with: HTML, CSS, JS
Tags: 3.3.0, accordion
#Bootstrap Accordions 27
Links: Source Code / Demo
Made with: HTML, CSS, JS
Tags: 4.0.0, jQuery, tabs, accordion
#Bootstrap Accordions 28
Author: Ferdi (ferdisahin)
Links: Source Code / Demo
Created on: January 13, 2019
Made with: HTML, CSS, JS
Tags: bootstrap 4 accordion, bootstra 4 accordion arrow, bootstrap 4 accordion with arrow
#Bootstrap Accordions 29
Links: Source Code / Demo
Made with: HTML, CSS
Tags: 4.0.0, accordion
#Bootstrap Accordions 30
Flat design accordion with as many nested levels as you need. Click on it!
Author: Ryan Bobrowski (rbobrowski)
Links: Source Code / Demo
Created on: August 10, 2013
Made with: HTML, CSS, JS
Tags: accordion, selectors, jquery, html5, aside
#Bootstrap Accordions 31
Author: Envato Tuts+ (tutsplus)
Links: Source Code / Demo
Created on: January 15, 2019
Made with: HTML, CSS, Babel
Tags: bootstrap, bootstrap 4
#Bootstrap Accordions 32
Links: Source Code / Demo
Made with: HTML
Tags: 4.1.1, table, accordion
#Bootstrap Accordions 33
Links: Source Code / Demo
Made with: HTML, CSS
Tags: 3.3.0, navbar, accordion, toggle
#Bootstrap Accordions 34
Links: Source Code / Demo
Made with: HTML, CSS, JS
Tags: 3.3.0, jQuery, animation, accordion
#Bootstrap Accordions 35
Author: Ibrahim Haouari (ibrahim-ih)
Links: Source Code / Demo
Created on: April 5, 2018
Made with: HTML, SCSS
#Bootstrap Accordions 26
Author: Asrul Nur Rahim (asrulnurrahim)
Links: Source Code / Demo
Created on: August 3, 2017
Made with: HTML, CSS
#Bootstrap Accordions 37
Author: Márcio Antônio Slivak (maslivak)
Links: Source Code / Demo
Created on: December 21, 2019
Made with: HTML, CSS, Babel
Tags: vue, bootstrap, accordion, produts, menu
#Bootstrap Accordions 38
Accordion example using the card component from bootstrap
Author: Luis Badiali (badiali)
Links: Source Code / Demo
Created on: March 6, 2020
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: bootstrap, accordion, css
#Bootstrap Accordions 39
Bootstrap 4 faq accordion with arrow example is created by using bootstrap 4 and font-awesome up down icons. It is a beautiful section for your faq queations accordion.
Author: uiuxStream (uiuxStream)
Links: Source Code / Demo
Created on: March 20, 2020
Made with: HTML, CSS
Tags: bootstrap 4, accordion, faq, plus minus icons
FAQs
What is a Bootstrap Accordion?
A Bootstrap Accordion is a web component that allows you to organize and present information in a collapsible and expandable format.
How do I add a Bootstrap Accordion to my website?
You can add a Bootstrap Accordion to your website by using the appropriate HTML, CSS, and JavaScript code.
Can I customize the design of my Bootstrap Accordion?
Yes, Bootstrap Accordions can be customized
How do I make my Bootstrap Accordion responsive?
Bootstrap Accordions are designed to be responsive and work well on all devices.
Are there any limitations to using Bootstrap Accordions?
No significant limitations to using Bootstrap Accordions.
