Lesson 22 - Bootstrap Components

LEARN

Office Hours

• Half-way point -- Check your grades
• If you need help please attend office hours
• Connect in person of via zoom
• Check the Canvas page for details
• Wednesday Lab Session 2:30-3:20 in Kepner 0090

Reading for Today

• Read 3.6 Box Model
• Follow Reading Schedule

Today

• Bootstrap Website
• Bootstrap Components

Bootstrap Typography

• Headings and type
• Colors
• Text alignment
• Spacing
• Floats & Fixed Position

Bootstrap Components

• Buttons
• Navs
• Lists
• Forms
• Alerts
• Tables
• Cards
• Media Objects
• Jumbotron

BUILD

Bootstrap Website

• Visit the Bootstrap website
• Buttons
• Cards
• Alerts
• Examples
• Explore and apply

W3Schools

• W3Schools - Bootstrap

Validator

• Validate the HTML
• Validate the CSS

Developer Tools

• Use Developer Tools in Browser to debug CSS

Bootstrap Demo

• Demo Code
• Study code so that you can reproduce these results
• See Page Template on Server
• See Typography Page on Server