Category: Bootstrap

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 dropdowns with Bootstrap 5.

Dropdowns

Dropdowns are toggleable overlays for display lists of items.

The Bootstrap 5 implementation depends on Popper.js.

For example, we can write:

<div class="dropdown">  
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">  
    Dropdown button  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

We have the div with the dropdown class.

The button lets us toggle the dropdown on and off.

The data-toggle attribute is also needed to make the button a toggle.

It has the dropdown-toggle class to add the toggle.

Then we add the ul with the dropdown-menu class to add the list.

The list items have the dropdown-item class.

The button can be replaced with an a element.

For example, we can write:

<div class="dropdown">  
  <a class="btn btn-secondary dropdown-toggle" href="#" data-toggle="dropdown">  
    Dropdown link  
  </a>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

We have an a element instead with the dropdown-toggle class instead of a button.

Also, we can change the button variant.

For example, we can write:

<div class="dropdown">  
  <a class="btn btn-danger dropdown-toggle" href="#" data-toggle="dropdown">  
    Dropdown link  
  </a>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

to change the class of the button to .btn-danger .

Split Button

The dropdown button can be a split button.

To add it, we add 2 buttons:

<div class="btn-group">  
  <button type="button" class="btn btn-danger">Action</button>  
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">  
    <span class="sr-only">Toggle Dropdown</span>  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

We have the .btn-group class instead of the dropdown class in the outer div.

Inside the div, we have 2 buttons.

One with the text and one with the arrow.

It has the dropdown-toggle class and the data-toggle attribute so that we can toggle the menu with it.

Also, we have the dropdown-toggle-split to make the button align with the left button.

Sizing

The size of the button dropdown button can be changed.

For example, we can use the btn-lg class to make it large:

<div class="btn-group">  
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">  
    Large button  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

We can also add the btn-sm class to make it small:

<div class="btn-group">  
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">  
    Large button  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

Directions

The direction of the dropdown can be changed.

We can make it display above the button.

For example, we can use the .dropup class to do that by writing:

<div class="btn-group dropup">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    Large button  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

It also works with split buttons:

<div class="btn-group dropup">  
  <button type="button" class="btn btn-secondary">  
    Split dropup  
  </button>  
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">  
    <span class="sr-only">Toggle Dropdown</span>  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

Dropright

We can add the .dropright class to make the menu display on the right.

For example, we can write:

<div class="btn-group dropright">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    button  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

to make the right arrow display beside the text and show the menu on the right.

For a split button, we can write:

<div class="btn-group dropright">  
  <button type="button" class="btn btn-secondary">  
    Split  
  </button>  
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">  
    <span class="sr-only">Toggle Dropdown</span>  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

to do the same thing with a split button.

Conclusion

We can add a dropdown easily with Bootstrap 5.

It comes with various customization options.

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 customize dropdowns with Bootstrap 5.

Dropleft

We can add the dropleft class to make the menu show on the left.

The arrow will also be pointed to the left.

For example, we can write:

<div class="btn-group dropleft">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    button  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

We add the dropleft class to the outer div to make the arrow show to the left of the button.

Also, the menu will be displayed to the left of the button.

With a split button, we’ve to put the arrow on the right instead of the left:

<div class="btn-group dropleft">  
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">  
    <span class="sr-only">Toggle Dropdown</span>  
  </button>  
  <button type="button" class="btn btn-secondary">  
    Split  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

Menu Items

Menu items had to be links in old versions of Bootstrap.

With Bootstrap 5, items can also be buttons.

For example, we can write:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    button  
  </button>  
  <ul class="dropdown-menu">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

We have li elements that have buttons instead of links.

Active

We can set an item to be active with the .active class.

For instance, we can write:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    button  
  </button>  
  <ul class="dropdown-menu">  
    <li><button class="dropdown-item active" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

With the active class, the item will be highlighted.

Disabled

To make an item disabled, we can add the disabled class:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    button  
  </button>  
  <ul class="dropdown-menu">  
    <li><button class="dropdown-item disabled" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

Now we can’t interact with the disabled item and it’s grayed out.

Menu Alignment

We can change the alignment of the menu.

To change it, we can add the .dropdown-menu-right class to the .dropdown-menu class to right-align the menu.

For example, we can write:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-right">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

We have the dropdown-menu and dropdown-menu-right classes to move the alignment of it to the right.

Responsive Alignment

We can disable the dynamic positioning by adding the data-display='static' attribute.

For example, we can write:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-lg-right">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

We add the data-display attribute.

And we added the dropdown-menu-lg-right to display the menu correctly.

This will make the menu align to the left.

We can also align it to the left with the dropdown-menu-lg-left class:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-lg-left">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

Menu Content

We can add various kinds of content to the menu.

Headers

We can add a header with the dropdown-header class:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-lg-left">  
    <li>  
      <h6 class="dropdown-header">Dropdown header</h6>  
    </li>  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

Dividers

Also, we can add a divider with the dropdown-divider class:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-lg-left">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li>  
      <hr class="dropdown-divider">  
    </li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

We’ll see an empty line in between the items.

Conclusion

We can customize the menu with many features.

We can add buttons as items.

Headers and dividers can also be added.

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 manipulate dropdowns with JavaScript and add content with Bootstrap 5.

Text

We can add any text to a dropdown menu.

For instance, we can write:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">  
    button  
  </button>  
  <div class="dropdown-menu p-4 text-muted">  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non libero congue lectus pharetra dictum quis ut eros. Nunc ac eleifend risus. In vitae arcu tincidunt, eleifend velit id, cursus nibh. Vestibulum hendrerit urna dictum, vulputate quam et, faucibus sapien. Suspendisse in mauris non diam facilisis aliquet eget ac nisi. Donec nec elit vel ex pellentesque pellentesque. Sed commodo tellus at enim vulputate ornare. Pellentesque vel elit ut libero hendrerit dictum a in dolor. Suspendisse cursus justo nulla, ac malesuada orci pretium quis. Sed sed nunc in lacus hendrerit consequat.  
  </div>  
</div>

to add text with some padding into our dropdown menu.

Forms

Forms can also be put inside the menu.

For example, we can write:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">  
    button  
  </button>  
  <div class="dropdown-menu p-1 text-muted">  
    <form class="px-4 py-3">  
      <div class="mb-3">  
        <label for="email" class="form-label">Email</label>  
        <input type="email" class="form-control" id="email" placeholder="email">  
      </div>  
      <div class="mb-3">  
        <label for="password" class="form-label">Password</label>  
        <input type="password" class="form-control" id="password" placeholder="Password">  
      </div>  
      <div class="mb-3">  
        <div class="form-check">  
          <input type="checkbox" class="form-check-input" id="check">  
          <label class="form-check-label" for="check">  
            Remember me  
          </label>  
        </div>  
      </div>  
      <button type="submit" class="btn btn-primary">Sign in</button>  
    </form>  
  </div>  
</div>

to add a form in the menu.

We just put the form straight into the dropdown menu container.

Dropdown Options

We can change the location of the dropdown with the data-offset attribute.

For example, we can write:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-offset="10,20">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-lg-left">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>        
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

to move the menu farther away from the toggle button.

The numbers are the x and y distance in pixels we want to move the menu by.

We can use the data-reference attribute to change it to the parent:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-reference="parent">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-lg-left">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>        
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

JavaScript

We can call a dropdown via JavaScript.

For instance, given the following dropdown:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-lg-left">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>        
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

We can show the menu by writing:

const dropdownToggleEl = document.querySelector('.dropdown-toggle')  
const dropdownList = new bootstrap.Dropdown(dropdownToggleEl);  
dropdownList.show();

We get the dropdown by the toggle by selecting the element with the .dropdown-toggle class.

Then we pass that to the bootstrap.Dropdown constructor.

Then we call show on the returned object to open the menu.

Other methods include toggle to toggle the menu.

hide to hide the menu.

update updates the position of the dropdown.

dispose destroys the dropdown.

getInstance gets the dropdown instance.

Events

The dropdown element also emits a few events.

It emits the show.bs.dropdown event when the dropdown is showing.

shown.bs.dropdown is emitted when it’s shown.

hide.bs.dropdown is emitted when it’s hiding.

hidden.bs.dropdown is emitted when it’s hidden.

We can listen to it with the addEventListener method:

const myDropdown = document.getElementById('myDropdown')  
myDropdown.addEventListener('show.bs.dropdown', () => {  
  // do something...  
})

Conclusion

We can add forms and text into a dropdown menu.

Also, we can listen to the events it emits and manipulates it with JavaScript.

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 layouts to forms with Bootstrap 5.

Horizontal Form Label Sizing

We can change the sizing of form fields with the col-form-label-sm and col-form-label-lg classes.

They can be applied to the form labels and legends.

The size should match the size of the form control, which can be set with the form-control-lg and form-control-sm classes.

For example, we can write:

<div class="row mb-3">
  <label for="small" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-sm" id="small" placeholder="small">
  </div>
</div>

<div class="row mb-3">
  <label for="medium" class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="medium" placeholder="medium">
  </div>
</div>

<div class="row">
  <label for="large" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-lg" id="large" placeholder="large">
  </div>
</div>

Column Sizing

The columns can be sized with the .col and .row classes.

For example, we can write:

<div class="row g-3">
  <div class="col-sm-6">
    <input type="text" class="form-control" placeholder="City">
  </div>

 <div class="col-sm">
    <input type="text" class="form-control" placeholder="Region">
  </div>

 <div class="col-sm">
    <input type="text" class="form-control" placeholder="Postal code">
  </div>
</div>

We add the col-sm-6 and col-sm classes to set the column widths if the breakpoint is sm or wider.

g-3 add some gutters between the input boxes.

Auto-Sizing

To change the size of form fields automatically, we can use the col and col-auto classes to size the columns.

For example, we can write:

<form class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="sr-only" for="name">Name</label>
    <input type="text" class="form-control" id="name" placeholder="james smith">
  </div>

 <div class="col-auto">
    <label class="sr-only" for="username">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="username" placeholder="Username">
    </div>
  </div>

 <div class="col-auto">
    <label class="sr-only" for="fruit">Fruit</label>
    <select class="form-select" id="fruit">
      <option selected>Choose...</option>
      <option value="1">apple</option>
      <option value="2">orange</option>
      <option value="3">grape</option>
    </select>
  </div>

 <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="agree">
      <label class="form-check-label" for="agree">
        I agree
      </label>
    </div>
  </div>

 <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

We have multiple fields displayed side by side because we have the col-sm-3 and col-auto classes to size the columns.

They let us display the form fields side by side if we hit the sm breakpoint or wider.

Inline Forms

We can make forms inline with the .align-items-center to align the form elements to the middle.

The gutter is added with the g-3 class.

For example, we have:

`<form class="`row row-cols-md-auto g-3 align-items-center`">
  <div class="col-12">
    <label class="sr-only" for="name">Name</label>
    <input type="text" class="form-control" id="name" placeholder="james smith">
  </div>`

 <div class="col-12">
    <label class="sr-only" for="username">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="username" placeholder="Username">
    </div>
  </div>

 <div class="col-12">
    <label class="sr-only" for="fruit">Fruit</label>
    <select class="form-select" id="fruit">
      <option selected>Choose...</option>
      <option value="1">apple</option>
      <option value="2">orange</option>
      <option value="3">grape</option>
    </select>
  </div>

 <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="agree">
      <label class="form-check-label" for="agree">
        I agree
      </label>
    </div>
  </div>

 <div class="col-12">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

Validation

Bootstrap 5 provides us with classes to display validation status for our form.

It scopes the styles for :invalid and :valid styles to the parent .was-validate class.

Also, it resets the appearance of the form.

The .was-validated class would be removed from the form after submission.

.is-invalid and .is-valid can be used as a fallback for pseudoclasses.

Custom Styles

If we want to show custom validation messages, we need the novalidate boolean attribute to our form.

It disables the browser default feedback tooltips but still let us use the form validation API in JavaScript.

When we try to submit, we’ll have the :invalid and :valid styles applied to the form controls.

Conclusion

We can size columns to the way we want to add layouts to forms.

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.