×

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

Bootstrap4

Introduction to Bootstrap4

Component of Bootstrap


Advance Grid

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 4 Example</title>

<meta charset="utf-8">

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

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

</head>

<body>

<div class="container-fluid">

<h2>Collapsible Content</h2>

<p>As soon as you Click on simple button it will hide the content.</p>

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

<div id="demo" class="collapse show"> 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


Collapsible Content

As soon as you Click on simple button it will hide the 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 4 Example</title>

<meta charset="utf-8">

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

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

</head>

<body>

<div class="container-fluid">

<div id="accordion">

<div class="card">

<div class="card-header">

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

Collapsible Group Item #1 </a>

</div>

<div id="collapseOne" class="collapse show" data-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-toggle="collapse" href="#collapseTwo">

Collapsible Group Item #2 </a>

</div>

<div id="collapseTwo" class="collapse" data-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-toggle="collapse" href="#collapseThree">

Collapsible Group Item #3 </a>

</div>

<div id="collapseThree" class="collapse" data-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


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