Bootstrap 4 Collapse

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

Steps to make bootstrap 4 collapsible Element

Use either <a> or <button> to link collapsible element.
Add data attribute data-toggle="collapse" to 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.
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="#demo_id">Show Collapsible Features</button>
<div id="demo_id" class="collapse">
  Write Your Content
</div>

Try it now

Source Code

          <div class="container text-center mt-4">
  <h2 class="text-center">Bootstrap Collapse</h2>
  <button data-toggle="collapse" data-target="#myBlockId" class="btn btn-success">Learn Bootstrap</button>
  <div id="myBlockId" class="collapse mt-5">
    Bootstrap is an HTML,CSS & Javascript based CSS framework that is widely used during web development.
  </div>
</div>

Try it now

Source Code: Output

Bootstrap Collapse

Bootstrap is an HTML,CSS & Javascript based CSS framework that is widely used during web development.

Note: Bootstrap collapse feature is used to show and hide the text information.

Collapsible Content Show/Hide

By default, collapsible element is hidden. To show the hidden content, you have to use .show to collapsible elements(<div>containing class.collapse).

General Syntax

      <div class="collapse show ">Your Content..</div>

Try it now

Source Code

          <div class="container text-center mt-4">
  <h2 class="text-center">Bootstrap Collapse</h2>
  <button data-toggle="collapse" data-target="#myBlockId" class="btn btn-success">Click To Show The Effect</button>
  <div id="myBlockId" class="collapse show mt-5">
    Bootstrap is an HTML, CSS & Javascript-based CSS framework that is widely used during web development.
  </div>
</div>

Try it now

Source Code: Output

Bootstrap Collapse

Bootstrap is an HTML, CSS & Javascript-based CSS framework that is widely used during web development.

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

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4