Bootstrap Accordion with Plus Minus Icon

Creating a Bootstrap Accordion with a Plus Minus Icon involves utilizing Bootstrap’s components for the accordion functionality along with icons to represent the expand and collapse actions.

Bootstrap 5 Tutorial Update

We have updated this Bootstrap tutorial to Bootstrap 5.3.2 and BSB Framework 2.0.3. We have rechecked this Bootstrap example on Nov 29, 2023.

Best Ready to Use Web Themes & Templates

Bootstrap Accordion with Plus Minus Icon

We have shared the CSS to simplify modifying Bootstrap Accordion with Plus Minus Icon. This demo optionally uses icons in the Bootstrap head to enhance the interface.

You can change the default arrow icons of Bootstrap Accordion with the Plus Minus icons by adding the .bsb-accordion-6 class in the parent tag. Class .bsb-accordion-6 will be available after loading the accordion-6.css stylesheet. It is elementary, adjustable, and customizable.

<section class="bsb-accordion-6 py-3 py-md-5 py-xl-8">
  ....
</section>

You can check the demo to comprehend the idea. Bootstrap Icons library has free, high quality with over 2,000 open-source icons.

Features

  • Bootstrap 5
  • BSB Framework
  • Accordion Plus Minus Icon
  • Bootstrap Icons
  • HTML5 & CSS3
  • W3C Valid
  • Commented Code
  • Responsive Layout
  • Easy to Use
  • Cross Browser Compatible

Preview

<!-- Accordion 6 - Bootstrap Brain Component -->
<section class="bsb-accordion-6 py-3 py-md-5 py-xl-8">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="accordion" id="accordionExample">
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <i class="bi-apple me-2"></i>
                Accordion Item #1
              </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <i class="bi-android2 me-2"></i>
                Accordion Item #2
              </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                <i class="bi-microsoft me-2"></i>
                Accordion Item #3
              </button>
            </h2>
            <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/tutorials/accordions/accordion-6/assets/css/accordion-6.css">
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap 5 Accordion Examples


Browse our best free Bootstrap Accordion tutorials and examples. These Bootstrap Accordion examples have a variety of layouts and designs. Extending these Bootstrap Accordion examples to fit into your Bootstrap projects is very easy.

  • Use in personal projects
  • Customize the template files
  • Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • Free Updates
  • Access to all 5 Pro Templates
  • Access to all 34 Pro Components
  • Use in SaaS
  • Resell & Redistribute

BB Startup

Freelancer

$49

3 Months Access

5 Pro BS Templates

34 Pro BS Components

  • Use in personal projects
  • Customize the template files
  • Unlimited Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • 3 Months Free Updates
  • Access to all our 5 Pro Templates
  • Access to all our 34 Pro Components
  • Use in SaaS
  • Resell & Redistribute

BB Club

Agency

$149

12 Months Access

5 Pro BS Templates

34 Pro BS Components

  • Use in personal projects
  • Customize the template files
  • Unlimited Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • 12 Months Free Updates
  • Access to all our 5 Pro Templates
  • Access to all our 34 Pro Components
  • Use in SaaS
  • Resell & Redistribute