Bootstrap 4 Collapse

Bootstrap 4 collapse feature is used to show and hide large amount of information.

Steps to make bootstrap collapsible Element

  • Step1: Use either <a> or <button> to link collapsible element.

  • Step2:Add data attribute data-toggle="collapse" to either either <a> or <button> and other data attribute data-target="#id-of-collpasible-element" to only<button> while as href="#" is used by <a> to link collasible element.

  • Step3: Provide id="id-of-collapse-element" and .collapse to the collapsible element .

Example

This is is one of the best features to show large content of data in front of the users.

General Syntax

		<button data-toggle="collapse" data-target="#myBlockId">Learn Bootstrap</button>
<div id="myBlockId" class="collapse">
  Bootstrap collapse content.
</div>
	  
Try It Now

Source Code

	
		<div class="container my-2">
  <button data-toggle="collapse" data-target="#myBlockId">Learn Bootstrap</button>
  <div id="myBlockId" class="collapse">
    Bootstrap is an HTML, CSS & Javascript-based CSS framework that is widely used during web development.
  </div>
</div>
<!--/container-->	
	
Try it yourself

Note: Please keep in mind that by default collapsible element is hidden.To show the hidden content,you have to use .show to collapsible elements(<div>containing class.collapse).

Bootstrap 4 Collapsible Content Show/Hide

General Syntax

		<button data-toggle="collapse" data-target="#myBlockId" 
        class="btn btn-success">Click To Show The Effect</button>
<div id="myBlockId" class="collapse show">
  Collapsible Content goes here
</div>
	  
Try It Now

Source Code

	
		<div class="container my-2">
  <button data-toggle="collapse" data-target="#myBlockId" 
          class="btn btn-success">Click To Show The Effect</button>
  <div id="myBlockId" class="collapse show">
    Collapsible Content goes here
  </div>
</div>
<!--/container-->	
	
Try it yourself

Note: In the above example,.show is applied to show the collapsible element content.

Our Tutorials

Bootstrap 4 Collapse
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS