Bootstrap

Bootstrap Accordion Example with icon and arrow

Setup bootstrap collapse step by step and bootstrap accordion example

Bootstrap collapse called as bootstrap accordion. This is a step by step guide for beginner to setup bootstrap collapse with arrow or with icon.

Bootstrap Accordion  Example with icon and arrow

Bootstrap accordion example

Bootstrap accordion example

Bootstrap accordion example example preview

Bootstrap accordion Item #1 example
Bootstrap accordion Item #2 example
Bootstrap accordion Item #3 example

Bootstrap accordion with arrow

Bootstrap accordion with arrow

Bootstrap accordion with arrow example preview

Bootstrap accordion with arrow Item #1 example
Bootstrap accordion with arrow Item #2 example
Bootstrap accordion with arrow Item #3 example

CSS Code

Bootstrap accordion with arrow required css code

 

<style>
.arrow > a {
  display: block;
  position: relative;
}
.arrow > a:after {
  content: "\f078"; /* fa-chevron-down */
  font-family: 'FontAwesome';
  position: absolute;
  right: 0;
}
.arrow > a[aria-expanded="true"]:after {
  content: "\f077"; /* fa-chevron-up */
}
</style>

Bootstrap collapse with icon

Bootstrap collapse with icon

Bootstrap collapse with icon example preview

Bootstrap accordion with arrow Item #1 example
Bootstrap accordion with arrow Item #2 example
Bootstrap accordion with arrow Item #3 example

CSS Code

Bootstrap collapse with icon required css code

 

<style>
.arrow-two > a {
  display: block;
  position: relative;
}
.arrow-two > a:after {
  content: "\f138"; /* fa-chevron-circle-right */
  font-family: 'FontAwesome';
  position: absolute;
  right: 0;
}
.arrow-two > a[aria-expanded="true"]:after {
  content: "\f077"; /* fa-chevron-up */
}
</style>

Bootstrap accordion with plus minus

Bootstrap accordion with plus minus

Bootstrap accordion with plus minus example preview

Bootstrap accordion with plus minus icon Item #1 example body text
Bootstrap accordion with plus minus icon Item #2 example body text
Bootstrap accordion with plus minus icon Item #3 example body text

CSS Code

Bootstrap accordion with plus minus required css code

 

<style>
.plus-minus > a {
  display: block;
  position: relative;
}
.plus-minus > a:after {
  content: "\f067"; /* fa-plus */
  font-family: 'FontAwesome';
  position: absolute;
  right: 0;
}
.plus-minus > a[aria-expanded="true"]:after {
  content: "\f068"; /* fa-minus */
}
</style>

Next entry: Bootstrap 4 Accordion Menu with arrow and icon example
Prev entry: HTML Table Step By Step Guide For Beginners