Learn your way! Get started

Bootstrap 3.1, Part 3 of 4: Components

with expert Adam Barney


Watch trailer


Course at a glance

Included in these subscriptions:

  • Dev & IT Pro Video
  • Dev & IT Pro Power Pack

Release date 7/21/2014
Level Intermediate
Runtime 1h 16m
Closed captioning Included
Transcript Included
eBooks / courseware Included
Hands-on labs N/A
Sample code Included
Exams Included


Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More



Course description

HTML is pretty simple. There are a limited number of elements, and only so much you can do to style those individual elements. Bootstrap’s core CSS does a good job with that default styling, but now it’s time to take the next step. In this course, we’ll look at Bootstrap Components – these are design elements that are not a part of HTML proper, but a combination of HTML and CSS that create compelling visual design elements to help create engaging user interfaces. We’ll look at creating some different input elements, page navigation, emphasizing content in subtle ways with labels and badges, or in big ways with jumbotrons. We’ll also check out how we can visually separate content from its surroundings – both text-based content in wells, panels and alerts, and images in thumbnails. It all comes together beautifully with Bootstrap to make our job of creating great-looking websites easy!

Prerequisites

This course assumes that the users have an understanding of developing web applications using HTML, ASP.NET, and JavaScript in any development environment. The user should have already viewed ‘Bootstrap 3.1: Introduction and Installing’ and ‘Bootstrap 3.1: Base CSS’ before viewing this course.

Learning Paths

This course is part of the following LearnNowOnline SuccessPaths™:
JavaScript Frameworks

Meet the expert

Adam Barney has been writing code in one form or another since the 4th grade and has been 100% focused on .NET since 2005. He is currently a senior-level consultant living in Lincoln, NE where he co-founded and runs both the Lincoln .NET Users Group and Nebraska Code Camp. Adam also enjoys speaking at user groups, code camps, and developer conferences in the Midwest.

Course outline



Components

Input (15:42)
  • Introduction (00:41)
  • Bootstrap Components (00:35)
  • Input Components (00:31)
  • Dropdowns (01:13)
  • Button Groups (00:48)
  • Split-Button Dropdown (00:33)
  • Input Groups (01:02)
  • Demo: Dropdown & Buttons (04:26)
  • Demo: Buttons & Input Groups (05:24)
  • Summary (00:25)
Navigation (17:24)
  • Introduction (00:27)
  • Navigation (00:23)
  • Navs (00:42)
  • Navbars (01:16)
  • Parts of a Navbar (00:51)
  • Alignment (01:05)
  • Demo: Navs - tabs & pills (03:33)
  • Demo: Navs - static navbars (04:32)
  • Demo: Navs - fixed navbars (04:08)
  • Summary (00:21)
Labels and Badges (05:04)
  • Introduction (00:23)
  • Labels and Badges (00:34)
  • Badges (01:01)
  • Demo: Labels & Badges (02:41)
  • Summary (00:23)
BreadCrumbs (07:55)
  • Introduction (00:37)
  • Breadcrumbs (00:49)
  • Pagination and Pagers (01:25)
  • Demo: Breadcrumbs & Pagination (04:47)
  • Summary (00:14)
Headers (07:43)
  • Introduction (00:31)
  • Page Headeres and Jumbotrons (00:54)
  • Jumbotron (00:56)
  • Demo: Headers & Jumbotrons (05:06)
  • Summary (00:14)
Panels (11:18)
  • Introduction (00:21)
  • Panels, Wells, and Alerts (01:21)
  • Wells (00:31)
  • Alerts (01:01)
  • Demo: Panels (03:26)
  • Demo: Wells and Alerts (04:18)
  • Summary (00:18)
Thumbnails (10:55)
  • Introduction (00:30)
  • Thumbnails and Icons (01:10)
  • Glyphicons (01:24)
  • Demo: Thumbnails (03:25)
  • Demo: Glyphicons (04:05)
  • Summary (00:20)