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 attributedata-target="#id-of-collpasible-element"to only<button>while ashref="#"is used by<a>to link collasible element. -
Provide
id="id-of-collapse-element"and.collapseto 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 nowSource Code
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 nowSource Code
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.
×
![Modal Image]()