Collapse برای نشان دادن و یا مخفی کردن متن می باشد.به طور مثال ممکن است بخواهیم با کلیک بر روی یک لینک اطلاعات تکمیلی راجب موضوع مورد نظر خود به کاربر نشان بدهیم.collapse را می توانیم در دکمه و یا لینک استفاده کنیم.در حالت دکمه به صورت زیر پیاده سازی می شود.

<p>
  
  <button  type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" >
   Botstrap دوره
  </button>
</p>
<div class="collapse" id="collapseExample">  
   این دوره در 3 ماه و هر ماه 4 جلسه برگزار می شود....
</div>

data-target باید برابر id تگ مربوط به اطلاعات تکمیلی باشد.

در لینک نیز به صورت زیر استفاده می کنیم

<p>
  <a  data-toggle="collapse" href="#collapseExample"  aria-expanded="false" aria->
    bootstrap دوره
  </a>
</p>
<div class="collapse" id="collapseExample">
   این دوره در 3 ماه و هر ماه 4 جلسه برگزار می شود....
</div>

href باید برابر id تگ مربوط به اطلاعات تکمیلی باشد.

در هر دو حالت نیز مقدار data-toggle باید “collapse” باشد.