Bootstrap 3.1, Part 2 of 4: Base CSS

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.

Each LearnNowOnline training course is made up of Modules (typically an hour in length). Within each module there are Topics (typically 15-30 minutes each) and Subtopics (typically 2-5 minutes each). There is a Post Exam for each Module that must be passed with a score of 70% or higher to successfully and fully complete the course.

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.

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.

Video Runtime

100 Minutes

Time to complete

270 Minutes

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)