Bootstrap 3 – Plugins


Shawn Wildermuth

Welcome to Part 5 of this review of the Pluralsight course Bootstrap 3 by Shawn Wildermuth.

Shawn is a 14-time Microsoft MVP (ASP.NET/IIS) and is involved with Microsoft as an ASP.NET Insider, ClientDev Insider and Windows Phone Insider.

He is the author of eight books on software development, and has given talks at a variety of international conferences including TechEd, Oredev, SDC, VSLive, DevIntersection, MIX, DevTeach, DevConnections and DevReach.

Bootstrap 3 is the final course in the learning path Front End Web Development.

Also in this series:

Part 1 – Why Bootstrap?

Part 2 – Getting Started

Part 3 –  Basics

Part 4 – Bootstrap Components

Bootstrap Plugins

In this module, Shawn creates a variety of “plugins” using the bootstrap classes and some JavaScript. There are also a number of prebuilt plugins available from




The idea is to hide and show each section as you click on the buttons

We see that we just need to specify the collapse class in order to make it invisible.

Shawn also demonstrates the effect that the attribution style has.




This is a more sophisticated control. We use the panel-group class with panel-collapse and collapse.

Modal Markup

Modal Events

This clip builds on the previous one to add more functionality to our modal dialog box.

We add some JavaScript to handle click events for the submit button and the reason dropdown list item.


This plugin involves quite a lot of HTML, and the CSS classes nav-tabs, tab-pane and tab.
The effect of this is different content on the same page being swapped in and out of view as the different tab buttons are clicked.


Doing this involves more work than the documentation suggests. To add a tooltip to a button, the following HTML change

<input type=”submit” data-toggle=”tooltip” title=”Press Here”
data-placement=”right” data-delay=”500″ />

However, Shawn explains why this alone does not work. He then writes some JavaScript to get it working.

$(“#contactForm input[type=submit]”).tooltip()

We see that by default the tooltip is shown above the element and appears instantly. Shawn shows how to change the placement of the tooltip, either using JavaScript or an html data-placement attribute.

The delay before the tooltip appears is too complex to achieve with data- attributes, but we see that it can be done in JavaScript quite easily:

$(“#contactForm input[type=submit]”).tooltip({
delay { show : 500, hide: 0 }

Finally Shawn demonstrates using the data-html attribute to display a full piece of html markup in the tooltip. We see that we can, for example, put an image inside our tooltip.


The CSS class “alert” on its own does not do anything, but when Shawn adds alert-warning we see the element appear in yellow.

Inside of this Shawn adds a hyperlink with the data-dismiss attribute with class=”close” so that the user can make the alert disappear when they want. We see the “x” on the right hand side of the alert displayed for this.

We also see how to make the alert display only at the time we want it to, e.g. after submitting our form.

We also learn that the alert box is actually removed from the DOM when the user dismisses it. Shawn shows how to hide the alert rather than removing it from the DOM, so that we can get it to display multiple times.

Carousel Markup


CC BY-SA 3.0

A carousel is a set of rotating images. Achieving this with Bootstrap begins with adding the “carousel” class followed by the type of animation, e.g. “slide” or “fade”.

We see that we should also create an inner div with “carousel-inner”, which contains all of the images that we are going to use. Shawn also explains that carousel content could in fact be any sort of html content, but this demo shows rotating images.

Each image is wrapped inside a containing div with class=”item”

Shawn explains the data-interval attribute. We build on this work in the next clip.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s