Bootstrap 5 — Close Buttons and Collapsible Elements

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add close buttons and collapsible elements with Bootstrap 5.

Close Button

We can add a close button with the close class.

For example, we can write:

<button type="button" class="close">
  <span>&times;</span>
</button>

Also, we can add a disabled button by writing:

<button type="button" class="close" disabled>
  <span>&times;</span>
</button>

We add the disabled attribute to disable it.

Collapse

We can toggle the visibility of the content with a few classes.

For example, we can write:

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapse">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse">
    Button with data-target
  </button>
</p>

<div class="collapse" id="collapse">
  <div class="card card-body">
    Sed non tellus quis sapien pretium aliquet consequat in velit. Nulla dapibus tortor eu pellentesque porttitor. Proin dignissim mauris a libero semper laoreet. Pellentesque vestibulum porta magna eu tempus. Vivamus non dolor suscipit tellus porttitor ullamcorper ut id urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur nibh risus, rutrum sit amet turpis eu, imperdiet aliquet ipsum.
  </div>
</div>

to add the toggle for our collapsible content and the collapsible content itself.

The toggles are in the p element.

We have the data-toggle set to collapse and the href set to the selector of the collapsible content to let it toggle the div with the collapse class.

The button is also a toggle for toggling the collapsible content.

It also has the same data-toggle attribute.

But instead of the href , we have the data-attribute with the selector for the collapsible content instead.

Multiple Targets

One toggle can toggle multiple targets.

For example, we can set the data-target attribute to a class instead of an ID of the collapsible element:

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse">Toggle both elements</button>
</p>

<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="collapse-1">
      <div class="card card-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus dolor at massa vestibulum, vitae tincidunt arcu fermentum. Integer vel sem velit. Vivamus nisi est, molestie a consectetur tempus, faucibus vitae arcu. Fusce ultricies viverra ligula vel auctor. Praesent pulvinar orci nulla, vel porttitor tellus ornare a. Quisque ut pellentesque odio. In quis metus turpis. Ut consectetur justo nec sapien volutpat condimentum. Cras nec lorem nec erat sodales pellentesque. Pellentesque iaculis quis leo sed auctor. Sed vestibulum est quis lacus faucibus, et sollicitudin nulla laoreet.
      </div>
    </div>
  </div>

  <div class="col">
    <div class="collapse multi-collapse" id="collapse-2">
      <div class="card card-body">
        Sed non tellus quis sapien pretium aliquet consequat in velit. Nulla dapibus tortor eu pellentesque porttitor. Proin dignissim mauris a libero semper laoreet. Pellentesque vestibulum porta magna eu tempus. Vivamus non dolor suscipit tellus porttitor ullamcorper ut id urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur nibh risus, rutrum sit amet turpis eu, imperdiet aliquet ipsum.
      </div>
    </div>
  </div>
</div>

We have the data-toggle is set to collapse , and data-target is set to the .multi-collapse class to let us toggle both collapse elements.

Accordion

To add an accordion, we can use the .accordion class.

For example, we can write:

<div class="accordion" id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne">
          Collapsible 1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus dolor at massa vestibulum, vitae tincidunt arcu fermentum. Integer vel sem velit. Vivamus nisi est, molestie a consectetur tempus, faucibus vitae arcu. Fusce ultricies viverra ligula vel auctor. Praesent pulvinar orci nulla, vel porttitor tellus ornare a. Quisque ut pellentesque odio. In quis metus turpis. Ut consectetur justo nec sapien volutpat condimentum. Cras nec lorem nec erat sodales pellentesque. Pellentesque iaculis quis leo sed auctor. Sed vestibulum est quis lacus faucibus, et sollicitudin nulla laoreet.
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo">
          Collapsible 2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" data-parent="#accordion">
      <div class="card-body">
        Sed non tellus quis sapien pretium aliquet consequat in velit. Nulla dapibus tortor eu pellentesque porttitor. Proin dignissim mauris a libero semper laoreet. Pellentesque vestibulum porta magna eu tempus. Vivamus non dolor suscipit tellus porttitor ullamcorper ut id urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur nibh risus, rutrum sit amet turpis eu, imperdiet aliquet ipsum.
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree">
          Collapsible 3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" data-parent="#accordion">
      <div class="card-body">
        Aliquam facilisis mauris odio, vitae volutpat mauris eleifend sit amet. Pellentesque a dolor dignissim, consectetur augue id, convallis velit. In lacinia venenatis orci maximus finibus. Cras eget consequat justo, vitae placerat velit. Nulla lacinia orci eu convallis luctus. Curabitur volutpat et dui sed condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam placerat scelerisque iaculis. Donec ultrices arcu id nibh rutrum dictum. In hac habitasse platea dictumst.
      </div>
    </div>
  </div>
</div>

We have the collapsible divs by creating the cards inside the div with the .collapse class.

And we have the headings for each item.

We add the headings with the data-toggle attribute set to collapse .

data-target set to the ID of the content div.

Conclusion

We can add the close button and collapsible elements with provided Bootstrap classes.