Instructions to create plus (plus) and minus (minus) Accordion in Bootstrap 4

How to create plus (plus) and minus (minus) buttons for Bootstrap 4 is quite simple, you just need to add a few lines of CSS.

Commonly used Accordion to design FAQ (Frequently Asked Questions).


  • Since we use the FontAwesome icon to create the + and - buttons, we will add FontAwesome in the header.


To see how to create Accordition you can read the instructions here

You see you will have an id #accordion And I will code the following CSS:

#accordion .card-header .card-link:after {
font-family: 'FontAwesome';
content: "f068"; // dấu -
float: right;

#accordion .card-header .card-link.collapsed:after {
content: "f067"; // dấu +

Also you can learn how to insert fontAwesome into CSS at the following link: