Lesson 1.1 — What is Bootstrap & How It Works

Lesson overview
Bootstrap is a front-end UI framework that provides a responsive grid, prebuilt components, and utility classes so you can build layouts and interfaces quickly. It’s mobile-first, meaning styles are designed for small screens first, then scaled up using breakpoints. You’ll mostly write HTML with Bootstrap classes, plus optional JavaScript for interactive components.

Learning outcomes

• Explain what Bootstrap is and when to use it
• Understand mobile-first and responsive design in Bootstrap
• Recognize the difference between utilities and components

Key concepts

• CSS framework: a set of predefined CSS classes and patterns
• Utilities: single-purpose classes like p-3, text-center, d-flex
• Components: structured UI blocks like navbars, cards, modals
• Responsive breakpoints (common ones): sm, md, lg, xl, xxl

Walkthrough (how Bootstrap “works”)

1. You include Bootstrap CSS in your page.
2. You add Bootstrap classes to HTML elements.
3. Bootstrap’s CSS applies consistent styling rules based on those classes.
4. For interactive parts (collapse, modals, tooltips), you include Bootstrap’s JS bundle.

Mini example

Practice tasks

• Create a simple “profile card” using only utilities: padding, border, rounded corners, text styles.
• Make text center-aligned on small screens and left-aligned on medium screens and above (hint: text-md-start).

Quick check (questions)

1. What does mobile-first mean in Bootstrap?
2. What’s the difference between a utility class and a component?

Lesson summary

• Bootstrap speeds up UI development using utilities, components, and a responsive grid.