×

Html & Html5

Introduction to Html

Component of Html

HTML Advance

HTML Advance

Html Form

Html5 basics

Html5 Grid

Html5 Graphics

Html5 Media

Html5 APIs

it training classes Logo

The World's best Software Development Study Portal

Bootstrap5

Introduction to Bootstrap5

Component of Bootstrap


Bootstrap Collapse


Whenever we want to hide any huge information than we can use it . And for that .collapse class is needed.
Let’s understand this by the following program:-


<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container mt-3">

<h2>Simple Collapsible</h2>

<p>Click on the button to toggle between showing and hiding content.</p>

<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo12">Simple collapsible</button>

<div id="demo12" class="collapse">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>

</div>

</body>

</html>

Output of this Program


Bootstrap Example

Simple Collapsible

Click on the button to toggle between showing and hiding content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 5 Example</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container-fluid">

<div id="accordion">

<div class="card">

<div class="card-header">

<a class="card-link" data-bs-toggle="collapse" href="#collapseOne">

Collapsible Group Item #1 </a>

</div>

<div id="collapseOne" class="collapse show" data-bs-parent="#accordion">

<div class="card-body">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>

</div>

</div>

<div class="card">

<div class="card-header">

<a class="collapsed card-link" data-bs-toggle="collapse" href="#collapseTwo">

Collapsible Group Item #2 </a>

</div>

<div id="collapseTwo" class="collapse" data-bs-parent="#accordion">

<div class="card-body">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>

</div>

</div>

<div class="card">

<div class="card-header">

<a class="collapsed card-link" data-bs-toggle="collapse" href="#collapseThree">

Collapsible Group Item #3 </a>

</div>

<div id="collapseThree" class="collapse" data-bs-parent="#accordion">

<div class="card-body">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>

</div>

</div>

</div>

</div>

</body>

</html>

Output of this Program


Bootstrap Example

Accordion Example

Note: The data-bs-parent attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.

Collapsible Group Item #1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

As soon as we click on Simple collapsible button the text vanishes.









Bootstrap 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute