Bootstrap 4 Tutorial

BS4 Introduction

How to use Bootstrap

BS4 Layout

BS4 Grid System

BS4 Typography

BS4 Colors

BS4 Table

BS4 Images

BS4 Jumbotron

BS4 Alerts

BS4 Buttons

BS4 Button Group

BS4 Badges

BS4 Progress Bar

BS4 Pagination

BS4 Breadcrumb

BS4 Card

BS4 Collapse

BS4 Nav Tabs Pills

BS4 Navbar

BS4 Tooltip

BS4 Carousel

BS4 Scrollspy

BS4 Forms

BS4 Form Validation

BS4 Form Custom

Page Stats

Visitor: 252

Bootstrap 4 Collapse

Bootstrap 4 Collapse is useful when you want to hide or show information.

Example 1: Click the button to hide or show contents.

<button class="btn btn-success" data-toggle="collapse" data-target="#html">Full Form of HTML</button>
<div id="html" class="collapse">
  <p>Full Form of HTML is Hyper Text Markup Language.</p>
</div>

Full Form of HTML is Hyper Text Markup Language.


By default, the collapsible content is hidden. However, you can add the .show class to show the content.

<button class="btn btn-success" data-toggle="collapse" data-target="#html3">Full Form of HTML</button>
<div id="html3" class="collapse show">
  <p>Full Form of HTML is Hyper Text Markup Language.</p>
</div>

Full Form of HTML is Hyper Text Markup Language.


Above example can also be used with <a> tag.


Collapse with anchor tag

<a href="#html2" data-toggle="collapse">Full Form of HTML</a>
<div id="html2" class="collapse">
  <p>Full Form of HTML is Hyper Text Markup Language.</p>
</div>
Full Form of HTML

Full Form of HTML is Hyper Text Markup Language.



Bootstrap Accordion

Example 2: Simple accordion by using the card component.

<div id="accordion">
   <div class="card">
      <div class="card-header">
         <a href="#acc1" data-toggle="collapse" data-parent="#accordion" class="card-link">
            Accordion Heading 1
         </a>
      </div>
      <div id="acc1" class="collapse show">
         <div class="card-body">
            Content to be display for 1st container <br> More text to be display <br> Some more text.
         </div>
      </div> 
   </div>
	
   <div class="card">
      <div class="card-header">
         <a href="#acc2" class="collapsed card-link" data-toggle="collapse" data-parent="#accordion">
	        Accordion Heading 2
         </a>
      </div>
      <div id="acc2" class="collapse">
         <div class="card-body">
            Content to be display for 2nd container <br> More text to be display <br> Some more text.
         </div>
      </div>
   </div> 
	
   <div class="card">
      <div class="card-header">
         <a href="#acc3" class="collapsed card-link" data-toggle="collapse" data-parent="#accordion">
            Accordion Heading 3
         </a>
      </div>
      <div id="acc3" class="collapse">
         <div class="card-body"> 
		    Content to be display for 3rd container <br> More text to be display <br> Some more text.
         </div>
      </div> 
   </div>
</div>
Content to be display for 1st container <br> More text to be display <br> Some more text.
Content to be display for 2nd container <br> More text to be display <br> Some more text.
Content to be display for 3rd container <br> More text to be display <br> Some more text.
Updated: 28-Mar-20
Ad: In case you're interested in knowing more info on dentist in Toorak, stop by carefamilydental.com.au
Ad: https://www.blankenshipdrygoods.com/bdg-collection https://www.blankenshipdrygoods.com/bdg-collection https://www.blankenshipdrygoods.com/bdg-collection