Collapse With Bootstrap 4

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

Try it now

Source Code

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

Try it now

Source Code

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