← Back to Home

Week 13 - Bootstrap & Responsive Design

Reference files for the live-coding demos, in teaching order. Open any example and use View Source (right-click → View Page Source) to read the code — then rebuild it yourself.

▶  Open the Interactive Slides

1. Grid System

Bootstrap 12-column grid with responsive breakpoints

2. Components

Buttons, cards, alerts, badges, and modals

3. Utility Classes

Spacing, colors, display, and flex utilities

4. Landing Page

Complete responsive landing page example

Tip: don't copy-paste. Type the code yourself, break it on purpose, then fix it. Use DevTools (F12) to inspect what's happening.