Basic collapse
Michael Johnson
UK , NYC
<p class="d-inline-flex flex-wrap gap-1">
<a aria-controls="collapseExample" aria-expanded="false" class="btn btn-primary"
data-bs-toggle="collapse" href="#collapseExample" role="button">
Link with href
</a>
<button aria-controls="collapseExample" aria-expanded="false"
class="btn btn-primary"
data-bs-target="#collapseExample" data-bs-toggle="collapse"
type="button">
Button with data-bs-target
</button>
</p>
<div class="collapse show" id="collapseExample">
<div class="card card-body dotted-2-secondary">
<div class="d-flex gap-2 mb-2">
<div class="btn-group btn-rtl">
<div aria-expanded="false"
class="h-50 w-50 b-r-50 overflow-hidden bg-gradient-secondary bg-outline-dark profile-img dropdown-toggle">
<img src="https://pinmeets.com/assets/images/avatar/02.png" class="img-fluid " alt="">
</div>
</div>
<div class="ms-1">
<div class="f-s-15 mb-0">Michael Johnson</div>
<p class="text-muted f-s-12 mb-0">UK , NYC</p>
</div>
</div>
<span>
Michael Johnson is a friendly, down-to-earth person who enjoys learning new things and helping others.
He likes keeping life simple, positive, and meaningful.
</span>
</div>
</div>
Horizontal
Michael Johnson
UK , NYC
<div class="card-body">
<p>
<button aria-controls="collapseWidthExample" aria-expanded="false"
class="btn btn-primary" data-bs-target="#collapseWidthExample"
data-bs-toggle="collapse" type="button">
Toggle width collapse
</button>
</p>
<div>
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body dotted-2-secondary w-280">
<div class="d-flex gap-2 mb-2">
<div class="btn-group btn-rtl">
<div aria-expanded="false"
class="h-50 w-50 b-r-50 overflow-hidden bg-gradient-secondary bg-outline-dark profile-img dropdown-toggle">
<img src="https://pinmeets.com/assets/images/avatar/02.png" class="img-fluid " alt="">
</div>
</div>
<div class="ms-1">
<div class="f-s-15 mb-0">Michael Johnson</div>
<p class="text-muted f-s-12 mb-0">UK , NYC</p>
</div>
</div>
<span>
Michael Johnson is a friendly, down-to-earth person who enjoys learning new things and helping others.
He likes keeping life simple, positive, and meaningful.
</span>
</div>
</div>
</div>
</div>
Multiple toggles and targets
Michael Johnson
UK , NYC
Michael Johnson
UK , NYC
<div class="row">
<div class="col-12 col-sm-6">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body dotted-2-secondary">
<div class="d-flex gap-2 mb-2">
<div class="btn-group btn-rtl">
<div aria-expanded="false"
class="h-50 w-50 b-r-50 overflow-hidden bg-gradient-secondary bg-outline-dark profile-img dropdown-toggle">
<img src="https://pinmeets.com/assets/images/avatar/02.png" class="img-fluid " alt="">
</div>
</div>
<div class="ms-1">
<div class="f-s-15 mb-0">Michael Johnson</div>
<p class="text-muted f-s-12 mb-0">UK , NYC</p>
</div>
</div>
<span>
Michael Johnson is a friendly, down-to-earth person who enjoys learning new things and helping others.
He likes keeping life simple, positive, and meaningful.
</span>
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body dotted-2-secondary">
<div class="d-flex gap-2 mb-2">
<div class="btn-group btn-rtl">
<div aria-expanded="false"
class="h-50 w-50 b-r-50 overflow-hidden bg-gradient-secondary bg-outline-dark profile-img dropdown-toggle">
<img src="https://pinmeets.com/assets/images/avatar/02.png" class="img-fluid " alt="">
</div>
</div>
<div class="ms-1">
<div class="f-s-15 mb-0">Michael Johnson</div>
<p class="text-muted f-s-12 mb-0">UK , NYC</p>
</div>
</div>
<span>
Michael Johnson is a friendly, down-to-earth person who enjoys learning new things and helping others.
He likes keeping life simple, positive, and meaningful.
</span>
</div>
</div>
</div>
</div>
