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

Getting Started

Getting Bootstrap

Shawn discusses the different versions available at getbootstrap.com

He explains the project structure that you need to get right.

Adding Bootstrap to Page

Now that we have all the files we need, we see how to add it to existing web project. In this course, Shawn demonstrates using Sublime Text 3, but you can of course use whichever editor happens to be your own favorite.

In this course we will be working on a Big Lebowski fan page and we start with a basic fixed sized page. Shawn adds references to the Bootstrap CS and JS files in index.html

What is the Grid System?

Bootstrap is made up of 12 units. For slightly more sophistication see the Ionic Grid system, however this system is more than adequate for most needs.

Shawn explains the CSS classes .col-xx-6, .col-xx-4, .col-xx-offset-2 etc.

Using the Grid System

Now Shawn demonstrates these concepts in Sublime Text, creating a sidebar.

The footer initially appears at the bottom of the sidebar, but Shawn shows how to fix this.

We see that the screen changes to a one column design again when the width of the screen is reduced.

Multiple Grid Types

Shawn explains that we have for different sizes of screen that we specify for:

.col-lg-xx: >= 1200px
.col-md-xx: >= 992px
.col-sm-xx: >= 768px
.col-xs-xx: < 768px

For example .col-md-6 .col-xs-12 means half the screen width when the width is between 992 and 1200 pixels, and full width when the width is less than 768 pixels

Using Multiple Grids

Shawn demonstrates a number different CSS classes applied to the sidebar section

For example
<section id=”sidebar” class=”col-md-4 col-sm-3 col-xs-6″/>

We see the effect of these changes on both narrow and wide screens.

Offsets and Rows

Here Shawn describes and demonstrates the concept of a logical row. He puts four carousel pictures inside one.

He shows that we can add offset CSS classes to images, e.g.

<img src=”..” alt=”1″ class=”col-md-2 col-md-offset-2″ />

Images and Responsive Helpers

Shawn demonstrates the pull-left and pull-right CSS classes, which use floats behind the scenes.

He also shows off img-thumbnail, which resizes to the width of the screen when the screen is smaller than the normal size of the image.

Responsive helpers say whether images are visible or hidden and certain resolutions. This clip also contains an explanation and demonstration of these.

Theming Bootstrap

We learn that it’s easy to add themes to our websites. We just need to add a reference to the new stylesheet:

<link rel=”stylesheet” href=”css/bootstrap.min.css”>
<link rel=”stylesheet” href=”css/bootstrap-theme.min.css”>

Shawn shows us bootswatch.com, which has free themes for Bootstrap.

He references the Amelia theme and we see a dramatically different look to the page instantly.

Customizing Bootstrap Package

This is a demo of how to use getbootstrap.com/customize/

This is useful if you are only using a small subset of bootstrap features.