Bootstrap 3 – Bootstrap Components


Shawn Wildermuth

Welcome to Part 4 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

Part 5 – Plugins

Bootstrap Components

Page Header and Breadcrumbs

We first see the page-header class in action, which creates a section with spacing around it. A page header may be just the page title, or a large section of content, depending on your requirements.

Beginning at 2:24, Shawn explains the purpose of breadcrumbs and demonstrates their use with the Bootstrap breadcrumb class. He applies this class to an ol (ordered list) tag and puts the breadcrumb elements inside the li elements within it. The active class is applied to the last element in this list to highlight the active page.

Button Groups

If you have related buttons, you may want to emphasize that by grouping them together. This is exactly what the button-group class if for, and we see how to apply it here. You can think of button groups as like radio buttons, but with a different look and feel.

We see a variety of looks for the button group: vertical, horizontal, smaller and larger.

Also see basic example and vertical on the bootstrap site.

Then we learn how to make the buttons “toggle-able”, effectively check-boxes or radio buttons styled to look like buttons.

Buttons are often easier to use than check-boxes on touch devices such as smart phones.


We first that by combining the dropdown and dropdown-menu class with the tabindex attribute to create an invisible dropdown list.

We can then make the list visible by setting the dropdown-menu element’s display to block.

Shawn then makes an element inactive with the disabled class, and separates the list with a divider. Finally, we see a show me button which toggles the visibility of the dropdown list.

Also see dropdowns on the bootstrap site.

Button Dropdowns

We see that we can put caret symbols inside our button to make it clearer that this button is for displaying a dropdown list.

Also see Btn-groups-nestedon the bootstrap site.

Using a Dropdown for a Select

This is the first part in the course where we write some JavaScript. Shawn uses jQuery (if you have never used this before see jQuery Fundamentals).

The purpose of the JavaScript is to update the dropdown button text to the same value as the user selects.

Input Groups

Input Groups allow us to add explanatory symbols onto the left or right hand side of a textbox. Here we see an email @ symbol, and a ! symbol.

These are added in spans and could display anything you want, including glyphicons.

Also see input groups on the bootstrap site.


Shawn demonstrates the pager class on an unordered list. This is an easy way to show decent looking previous and next page links.

We also see how to create a group of pages e.g. 1,2,3 etc, how to change their size, disabling a link, and setting one to active.

Also see pagination on the bootstrap site.


Again we use the img-responsive class to allow our images to auto-resize.
Then we add the thumbnail class as well. This adds a border box, and allows us to add captions by adding a div element inside it with the caption class applied to it.

Also see thumbnails on the bootstrap site


On its own, use of the panel class looks awful, but when panel-body is added to a child div, we can appreciate the power of the panel style. Use of panel-heading with panel-default and panel-title creates a great header look.

The footer, specified with the panel-footer class, inherits the same style as panel-heading.

Also see panels on the bootstrap site.


Wells create a bordered, slightly sunken section in your design. We can set the size with classes such as well-sm and well-lg

Also see wells on the bootstrap site

These are arguably the most important components in Bootstrap, however there are several others available which are described on the bootstrap components page.

Continue to Part 5 – Plugins

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 )

Facebook photo

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

Connecting to %s