Welcome to Part 3 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 3 – Basics
Bootstrap 3 Basics
First, Shawn shows the various headings, h1, h2, h3 etc, and other standard html tags strong and em.
Next he demos some Bootstrap specific classes: lead, text-muted, text-primary, text-success and text-warning
A standard button with only the browser styling is done with
Shawn shows that we can add “btn” class to get bootstrap styling
We see that the words primary, warning, success etc. are repeated across the framework and we can use these to style our buttons, for example:
<button class=”btn btn-primary”>Menu</button>
<button class=”btn btn-warning”>Menu</button>
<button class=”btn btn-success btn-sm”>Menu</button>
<a href=”#” class=”btn btn-success btn-sm”>Menu</a>
You can see how these look by watching this clip, or see w3 schools.
You can find all of your glyphs at getbootstrap.com/components/
Adding a glyph is easy: just insert a span:
<button class=”btn btn-success btn-sm”>
<span class=”glyphicon glyphicon-earphone”></span>
This displays a telephone icon inside a button. Shawn shows the effect of putting the glyph before and after the text, and then uses chevron-down which we’ll be using later.
Bootstrap 3 comes with around 250 glyphicons. For the full set see glyphicons.com
Navs and Navbars
Shawn begins with a navbar and structures it, adding classes such as navbar-header, navbar-nav and navbar-right.
We get our first taste of the active elements here, and we see that the navbar is moved into a simple list on smaller screens.
We actually don’t want to display the nav bar on small screens, so also explained is how to collapse the navigation bar with the navbar-collapse class.
Next Shawn implements a button to toggle the display of the nav bar. This button shows the chevron-down icon, and the idea is that mobile users will just see the toggle button at first, but if they click on it they will see the nav bar displayed as a simple list.
Starting with an unordered list, and adding bootstrap classes, we see that:
“list-unstyled” makes the bullet points disappear
“list-unstyled list-inline” puts all of the items left to right (on the same line)
“list-group” with “list-group-item” on each li tag creates a table like experience.
Shawn shows how you can wrap the list-group in a div to size it however you want, and how to highlight an element with the active class.
We also see some of the badges that you can add to a list, or other element.
We see that Bootstrap has a CSS class called table, which makes the table look much better, expanding itself to the size of the container.
Shawn also demos:
“table-striped” – a very easy way to achieve a striped background.
“table-hover” – highlight each element as the user hovers over it.
“table-condensed” – reduce padding to fit more information on screen
“table-responsive” – Don’t put this on the table element itself, see this clip for details
We move onto the Forms page, which currently has no formatting or good structure to it. Shawn demonstrates:
After the submit button is styled, Shawn explains that Bootstrap offers 3 form styles: standard vetical, inline, and horizontal.
He shows how you can use offsets to achieve a horizontal form with the labels to the left of the textboxes. We only get this look for the larger screens, because it automatically restyles for the smaller screens.
Shawn wraps up the module with a summary, giving general advice on appropriate use of Bootstrap.
Continue to Part 4 – Bootstrap Components