This tutorial explains all about Bootstrap 4 Collapse. Learn to create Bootstrap 4 collapse with multiple targets, etc:
In this tutorial, you will learn what a Bootstrap collapse is, how to create a Bootstrap 4 collapse, different types of collapse like Bootstrap navbar collapse, collapse with multiple targets, and frequently asked questions.
Please note that we have used Bootstrap version 4 in all examples.
=> Visit Here To See The Bootstrap Training Series For All
Let’s begin!
Table of Contents:
What Is Bootstrap Collapse
A Bootstrap collapse is used to show or hide a large volume of content. In other words, it toggles the visibility of the content.
There are different types of collapse components like Bootstrap collapse navbars, Bootstrap collapse tables, collapsible panels, collapsible list groups, etc.
The following table summarizes the main classes that we have used in this tutorial:
| Class | Usage |
|---|---|
| The .collapse class | This class is used to create a collapse. |
| The .show class | This class is used to show the content by default. |
| The .collapsing class | This class is added when the transition begins and removed when the transition ends. |
How To Create Bootstrap 4 Collapse
The main class used to create this component is the .collapse class. You can use a button or a link to create a basic collapse. If you use a button, then use the data-target attribute and if you use a link, use the href attribute to specify the target. In both cases, add the data-toggle attribute.
By default, the collapse component hides the content. To show the content by default, add the .show class.
Furthermore, the .collapsing class applies during the transition. It is added when the transition begins and removed when the transition ends.
Let’s do a few examples.
Example 1 – Basic collapse using a button and a link (button link)
You can try this example by running the below programming code:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <p> <a class="btn btn-primary" data-toggle="collapse" href="#example" role="button"> Link with href </a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#example"> Button with data-target </button> </p> <div class="collapse" id="example"> <div class="card card-body"> Sample content </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code:
Before clicking any button:
After clicking any button:
Note – After clicking any button, you need to click that button again to hide the content before clicking any other button.
Example 2 – Collapse with navbar
You can try this example by running the below programming code:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="collapse" id="example"> <div class="bg-dark p-4"> <p class="text-white">Sample content...</p> </div> </div> <nav class="navbar navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#example"> <span class="navbar-toggler-icon"></span> </button> </nav> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
Before clicking the button:
After clicking the button:
Bootstrap Collapse With Multiple Targets
Instead of targeting a single target, you can add multiple targets too.
The below programming code shows an example of collapse with multiple targets:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <p> <a class="btn btn-primary" data-toggle="collapse" href="#example1" role="button">Toggle element 1</a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#example2">Toggle element 2</button> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-target">Toggle both elements</button> </p> <div class="row"> <div class="col"> <div class="collapse multi-target" id="example1"> <div class="card card-body"> This is the first sample content. </div> </div> </div> <div class="col"> <div class="collapse multi-target" id="example2"> <div class="card card-body"> This is the second sample content. </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code:
Before clicking any button:
After clicking the Toggle element 1 button:
Note: After clicking any button, you need to click that button again to hide the content before clicking any other button.
After clicking the Toggle element 2 button:
After clicking the Toggle both elements button
Frequently Asked Questions
In this section, we will discuss some of the FAQs related to this topic. These questions will help you prepare for your examinations and interviews confidently.
Q #1) What is Bootstrap collapse?
Answer: It is a Bootstrap component that toggles the visibility of content.
Q #2) How do I close a collapse?
Answer: You can close it by clicking back the element.
Q #3) How do I enable collapse by default?
Answer: Add the .show class to enable it by default.
Q #4) What does Bootstrap navbar collapse do?
Answer: It wraps navbar items.
Q #5) How do I make the Bootstrap navbar collapse?
Answer: Inside a nav element with navbar classes, add a button with the .navbar-toggler class, the data-toggle attribute, and the data-target attribute. Next, add relevant content inside a div element with the collapse class. The id value of the data-target attribute must match with the id (the value of the id attribute) of the button.
Q #6) Why is my collapse not working?
Answer: There can be a few reasons for that. One possible reason is that you didn’t include the Bootstrap JS file in your project.
Conclusion
A collapse is used to toggle the visibility of content. You can also combine the collapse component with other components like tables, navbars, etc.
Hope you have enjoyed this tutorial. Hope to see you soon with our next tutorial. Happy learning!
=> Check Out The Perfect Bootstrap Training Guide Here