Learn your way! Get started

Bootstrap 3.1, Part 2: Base CSS

with expert Adam Barney


Watch trailer

Bootstrap 3.1, Part 2: Base CSS Trailer

Course at a glance

Included in these subscriptions:

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

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


Enterprise Solutions
Enterprise Solutions

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



Course description

Bootstrap has many reasons to love it. Why? Apart from being a FREE, open-sourced, really powerful, mobile-first responsive front-end framework, it also provides you with quite a lot of value right out of the box – with very little effort. With just a simple knowledge of some of the basic elements of Bootstrap styles, it takes just a small amount of work – typically just adding an CSS class here or there to HTML elements you already have in place to – to truly transform your site in to a professional-looking cleanly designed web application. In this course, we look at what basic CSS classes come with Bootstrap and how to apply them to your site to make it look great. You’ll be surprised at how easy it is, and maybe you’re love affair with this front-end framework will begin too.

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’ before viewing this course.

Learning Paths

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

Meet the expert

Adam Barney 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



Base CSS

Grid (27:09)
  • Introduction (00:50)
  • The Grid System (01:07)
  • The Responsive Grid Columns (00:43)
  • Responsive Column Widths (02:16)
  • Basic Layout HTML (00:29)
  • Other Grid Features (01:15)
  • Demo: The Grid System (04:18)
  • Demo: The Grid - med to sm (05:47)
  • Demo: The Grid - offsets (05:02)
  • Demo: The Grid - push pull (05:02)
  • Summary (00:15)
Typography (09:18)
  • Introduction (00:24)
  • Typography (00:49)
  • Lists (00:59)
  • Demo: Typography (03:18)
  • Demo: Typography - lists (03:27)
  • Summary (00:18)
Tables (08:17)
  • Introduction (00:18)
  • Tables (01:06)
  • Table Row and Cell Styling (00:34)
  • Demo: Table - styles (03:25)
  • Demo: Tables - rows/cells (02:35)
  • Summary (00:17)
Forms (14:42)
  • Introduction (00:22)
  • Forms (01:00)
  • Normal Forms (00:40)
  • Horizontal Forms (01:08)
  • Inline Forms (00:41)
  • Supported Controls (00:21)
  • Form Style (00:59)
  • Demo: Forms - normal (03:27)
  • Demo: Forms – horizontal (04:30)
  • Demo: Forms – inline (01:09)
  • Summary (00:20)
Buttons (07:54)
  • Introduction (00:36)
  • Buttons (00:53)
  • Button Styling (01:01)
  • Demo: Buttons (05:06)
  • Summary (00:17)
Helpers (12:46)
  • Introduction (00:28)
  • Helper Classes (01:36)
  • Responsive Helpers (01:09)
  • Demo: Helper - color - hidden (04:11)
  • Demo: Helper - visible - text (05:04)
  • Summary (00:16)
UpdatingBlogSite (20:44)
  • Introduction (00:16)
  • Updating Our Blog Site (00:30)
  • Demo: Blog Site - Main layout (05:03)
  • Demo: Blog Site – Post - title1 (04:47)
  • Demo: Blog Site – Post - title2 (04:13)
  • Demo: Blog Site – Override (05:17)
  • Summary (00:34)