Bootstrap 4 Javascript Plugins Tweet

Bootstrap includes a huge collection of javascript plugins namely collapsibles, accordions, tab panels, modals, popovers, tooltips, toasts and scrollspy which are made easy to add in webpages by simply foloowing their structures and adding their classes.

Collapse

Bootstrap collapse plugin is used to show and hide contents on click of a button or a link. Create a collapsible container by adding class collapse to it. Add a unique id to the container. Add a link or a button and add attribute data-toggle="collapse" and add another attribute data-target="uniqueid" and it's done.

<button class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample">Toggle Collapse</button>
<div class="collapse" id="collapseExample">
  <h4>Collapse Title</h4>
  <p>This is a collapse content.</p>
</div>

Multiple target Elements

Collapse can be used to toggle multiple elements at once. Since, W3CValidator doesn't validate a webpage with same id in multiple elements, it is a good idea to use classes.

Accordion - Grouping Collapsibles

Grouping multiple collapsibles and forcing only one open at a time is a good idea to optimize user experience as well as page length. Wrap the group of collapsibles with a class accordion and give an id. Add attribute data-parent="accordionid" to all the collapse containers to achieve it. Add class show to one of the collapse container to open it by default.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header">
      <a href="#collapse1" class="btn btn-link" data-toggle="collapse">Link to open collapse 1</a>
    </div>
    <div class="collapse show" data-parent="#accordionExample" id="collapse1">
      <div class="card-body">
        This is demo content for collapse 1.  	  		
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a href="#collapse2" class="btn btn-link" data-toggle="collapse">Link to open collapse 2</a>
    </div>
    <div class="collapse" data-parent="#accordionExample" id="collapse2">
      <div class="card-body">
        This is demo content for collapse 2.  	  		
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a href="#collapse3" class="btn btn-link" data-toggle="collapse">Link to open collapse 3</a>
    </div>
    <div class="collapse" data-parent="#accordionExample" id="collapse3">
      <div class="card-body">
        This is demo content for collapse 3.  	  		
      </div>
    </div>
  </div>	
</div>

Tabs

Bootstrap tab plugin is used to create tabbable panes quite similar to accordions. Create a tab list with list group and then create a container with class tab-pane and a unique id to refer to each links in the list group. Wrap all tab panes with a class tab-content. Add class fade to each tab pane to hide them and add some transition. Add class show active to one of the tab panes to show it by default.

Vertical Tab

<div class="row">
  <div class="col-sm-4">
    <div class="list-group">
      <a class="list-group-item list-group-item-action active" href="#tab1" data-toggle="list">Tab 1</a>  
      <a class="list-group-item list-group-item-action" href="#tab2" data-toggle="list">Tab 2</a>  
      <a class="list-group-item list-group-item-action" href="#tab3" data-toggle="list">Tab 3</a>    	
    </div>  	
  </div>
  <div class="col-sm-8">
  	<div class="tab-content">
      <div class="tab-pane fade show active" id="tab1">
      	<h4>Tab 1 Title</h4>
      	<p>This is a demo content for tab 1.</p>
      </div>
      <div class="tab-pane fade" id="tab2">
      	<h4>Tab 2 Title</h4>
      	<p>This is a demo content for tab 2.</p>
      </div>
      <div class="tab-pane fade" id="tab3">
      	<h4>Tab 3 Title</h4>
      	<p>This is a demo content for tab 3.</p>
      </div>  		
  	</div>
  </div>
</div>	

Horizontal Tabs

Use nav classes nav-tab or nav-pills to display the list items horizontally and make them tabbable links. Add attribute data-toggle="tab" for nav-tabs and data-toggle="pill" for nav-pills. Each support both attributes though.

<ul class="nav nav-tabs">
  <li class="nav-item"><a href="#navtab1" data-toggle="tab" class="nav-link active">Nav Tab 1</a></li>	
  <li class="nav-item"><a href="#navtab2" data-toggle="tab" class="nav-link">Nav Tab 2</a></li>	
  <li class="nav-item"><a href="#navtab3" data-toggle="tab" class="nav-link">Nav Tab 3</a></li>	
</ul>

<div class="tab-content mb-2">
  <div class="tab-pane fade show active" id="navtab1">
  	<h4 class="mt-2">Nav Tab 1</h4>
  	<p>This is a demo content for nav tab 1.</p>  	
  </div>
  <div class="tab-pane fade" id="navtab2">
  	<h4 class="mt-2">Nav Tab 2</h4>
  	<p>This is a demo content for nav tab 2.</p>  	
  </div>
  <div class="tab-pane fade" id="navtab3">
  	<h4 class="mt-2">Nav Tab 3</h4>
  	<p>This is a demo content for nav tab 3.</p>  	
  </div>
</div>

• Nav Tab 1
• Nav Tab 2
• Nav Tab 3

Modal

Bootstrap modal plugin is used to add popup dialog boxes to the webpage which are loaded on the webpage once the trigger is activated. The trigger might be any user interaction like click, hover, select, etc or simply the page loading event.

Modal Components

• Create a wrapper with class modal fade where the class modal defines the positioning and the class fade defines the transition. Add attribute tabindex="-1" to the modal in order to allow dismissal of the modal via Esc key from keyboard.
• Create another container class modal-dialog to define the width of the content and further transition and position of inner content. You can use classes modal-sm or modal-lg for smaller or larger modals.
• Add another container class modal-content inside modal-dialog for background color, border and border radius.
• Add another container class modal-header inside modal content to add a header to the modal. Add a title with class modal-title and a button or a link with class close and attribute data-dismiss="modal" inside the header.
• Add another container class modal-body inside the modal content to add the main content which may be some text, images, form elements or anything else.
• Add another container with class modal-footer to add a footer for the modal. You can also add a button to dismiss the modal in the footer. You might want to add a submit button here in case you have forms in the modal.

<button class="btn btn-info" data-toggle="modal" data-target="#modalExample">Open Modal</button>
<div class="modal fade" tabindex="-1" id="modalExample">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <a href="#" class="close" data-dismiss="modal">×</a>
      </div>
      <div class="modal-body">
        <p>Main content of the modal is added here.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Result

Tooltips

Bootstrap tooltip plugin is basically a different styling to the default tooltip of browsers that display the content inside the title attribute of any element. For performance reasons, tooltip is not initialized by default, so you must add the following javascript code in your page to activate them.

<script>
$('[data-toggle="tooltip"]').tooltip()	
</script>

Add attribute data-toggle="tooltip" to any element with their title attribute defined and you'll see the bootstrap tooltip appear. You can also define the placement of the tooltip with attribute data-placement="" where the available values are top, right, bottom and left. The default data placement is top.

<a href="#" title="This is a demo tooltip" data-toggle="tooltip" data-placement="right">Tooltip Example (Hover over me)</a>

Popovers

Bootstrap popover plugin is quite similar to tooltip plugin but it is activated on focus by default. You can activate it on hover by adding attribute data-trigger="hover". Moreover, it allows you to add title and a long description too.

Popovers are also not initialized by default for performance reason. Add the following script on your webpage to initialize them.

<script>
$('[data-toggle="popover"]').popover()	
</script>

<a href="#" title="Popover Example" data-description="This is a popover example content" data-trigger="hover">Popover Example (Hover over me)</a>	

Toasts

Bootstrap toasts plugin is a light weight alert message similar to push notifications widely used by mobile and desktop apps. Toasts are stacked vertically in a readable manner.

Toasts also need to be initialized. Add the following javascript code to initialize all toasts.

<script>
$('.toast').toast('show');
</script>

Toasts have an attribute data-autohide="true" which makes them quickly disappear from the page, so, you need to either add attribute data-delay="" where the value should be in miliseconds or override attribute data-autohide="true" by adding attribure data-autohide="false" which will force the toasts be displayed unless the close button is clicked. Make sure that you have added the data-dismiss button.

• Add a container with class toast.
• Add a container with class taost-header inside the toast. Add the header contents along with a class close with data-dismiss="toast".
• Add another container with class toast-body and add alert messages there.

<div class="toast" data-autohide="false">
  <div class="toast-header">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <a href="#" class="ml-2 mb-1 close" data-dismiss="toast">×</a>
  </div>
  <div class="toast-body">
    This is a toast alert example.
  </div>
</div>

Scrollspy

Bootstrap scrollspy plugin is highly useful specially on single page websites as it detects which section of the page is being displayed on the viewport and turns the link on the navbar for the same section active.

If you are using scrollspy on any element other than the <body> itself, you must define its position as relative with a height set and overflow-y set as scroll. It works fine with nested navigation too.

• Add an id to the navbar.
• Add links to the section ids on your navbar links.
• Add sections with same ids that are on your navbar links.
• Add attributes data-spy="scroll" data-target="" data-offset="0" to the body or the parent container where the data-target must be your navbar id. Define the offset value before the navbar starts spying the viewport scroll if needed or set it to 0.

<nav id="scrollspyExample" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Scrollspy Example</a>
  <ul class="nav nav-pills">
    <a class="nav-item nav-link" href="#section1">Section 1</a>
    <a class="nav-item nav-link" href="#section2">Section 2</a>
    <a class="nav-item nav-link" href="#section3">Section 3</a>
  </ul>
</nav>
<div data-spy="scroll" data-target="#scrollspyExample" data-offset="0" class="position-relative">
  <div id="section1" class="my-4">
    <h4>Section 1 Title</h4>
    <p>.....</p>  	  	
  </div>
  <div id="section2" class="my-4">
    <h4>Section 2 Title</h4>  
    <p>.....</p>	  	
  </div>
  <div id="section3" class="my-4">
    <h4>Section 3 Title</h4>
    <p>.....</p>  	  	
  </div>
</div>