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.

Dropdowns

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.

Pagination

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.

Thumbnails