Style by class names

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

• Slides Download Copy address for Prepare Present from the browser, or export to PowerPoint or PDF.
• Worksheet Download Copy address for Prepare Print the student copy; the Teacher edition has the answers.

Students will be able to

• I can link Bootstrap's stylesheet to a page.
• I can style buttons, text and messages by adding Bootstrap's class names.
• I can look up a class name instead of writing a CSS rule.

Timing

Predict and Run 10 min · Investigate 15 min · Modify 10 min · Make 15 min

Before class

Read the unit primer first. Bootstrap is a stylesheet: one big CSS file of ready-made rules (about 230 KB). Linking it with <link rel="stylesheet" href="bootstrap.min.css"> gives the page all its rules; adding a class name such as btn switches one on. Nothing new happens in the browser: students already know classes and CSS rules from HTML & CSS; the rules are just someone else's.

Most looks come in two parts, a base class for the shape (btn, alert) and a second for the colour or size (btn-primary, btn-lg). The planted bug leaves out the base class. Here the stylesheet sits beside the page (it is served from this site); on a real site, download it from getbootstrap.com. This course uses Bootstrap's CSS only, not its JavaScript, so nothing needs a script.

Running the lesson

1. Predict: ask what a class name does when nobody has written a rule for it.
2. Run: have everyone delete the link line and watch the page go plain. The class names are still there.
3. Investigate: for the bug, ask which class gives the shape and which gives the colour.
4. Modify: point students to the Reference drawer; looking names up is the skill, not remembering them.
5. Make: no style block allowed. Ask each student to read out the class for each part.

The hard part (on purpose)

Students want to write CSS to fix a look. Ask "which Bootstrap class does that?" and send them to the Reference drawer before they type a rule.

When students get stuck

Answers to the checks

1. Predict: There is no CSS rule for btn anywhere in this code. How will the two buttons look?
   The first is a blue Bootstrap button. The rules for btn and btn-primary are in bootstrap.min.css, which the first line links. The second button has no class, so it keeps the browser's look.
2. Which class does what?: Match each class name with what it does.
   container → E. a centred column with space at the sides; mt-3 → F. a space above (margin top, size 3); lead → C. a larger paragraph for the opening line; alert alert-warning → A. a yellow message box; btn → B. the button shape: padding, rounded corners, no border; btn-primary → D. the button's colour: blue
   Most Bootstrap looks come in two parts: a base class for the shape (btn, alert) and a second class for the colour (btn-primary, alert-warning).
3. No link: You delete the <link> line. What happens to class="btn btn-primary"?
   It stays in the code but does nothing, so the button looks plain
   A class name is only a label. It looks like something only when a stylesheet has a rule for it, and the rules are in bootstrap.min.css.
4. Spot the bug: Join should be a blue Bootstrap button, but it looks like a plain browser button. There is no error. Click the line that is wrong.
   line 5
   btn-primary only picks the colour. The shape and the colour itself come with btn, so the button needs class="btn btn-primary".
5. Where this leads: Your club page had about 40 lines of CSS for the menu, cards and form. With Bootstrap, where does that CSS live?
   In bootstrap.min.css, which someone else wrote; the page only names its classes
   The CSS still exists, thousands of lines of it. You borrow it by name. Next: the navbar, cards and grid, the club page's parts rebuilt.

Solutions

One possible solution for each task. Other correct programs are fine.

Modify › Green and large

<link rel="stylesheet" href="bootstrap.min.css">

<div class="container mt-3">
  <h1>Chess club</h1>
  <p class="lead">Chess every Wednesday at lunch in the library.</p>
  <div class="alert alert-warning">Sign-ups close on Friday.</div>
  <button class="btn btn-success btn-lg">Join</button>
  <button class="btn btn-outline-secondary">Read more</button>
</div>

Modify › A red alert

<link rel="stylesheet" href="bootstrap.min.css">

<div class="container mt-3">
  <h1>Chess club</h1>
  <div class="alert alert-danger">The tournament is full.</div>
  <p class="lead">Chess every Wednesday at lunch in the library.</p>
  <div class="alert alert-warning">Sign-ups close on Friday.</div>
  <button class="btn btn-primary">Join</button>
  <button class="btn btn-outline-secondary">Read more</button>
</div>

a notice for your own event

<link rel="stylesheet" href="bootstrap.min.css">

<div class="container mt-3">
  <h1>Art show</h1>
  <p class="lead">Year 8 paintings in the hall, Thursday after school.</p>
  <div class="alert alert-info">Families welcome. Entry is free.</div>
  <button class="btn btn-primary">Sign up</button>
  <button class="btn btn-outline-secondary">More</button>
</div>

Stretch and support

Stretch: Use btn-sm and btn-lg, outline buttons (btn-outline-danger), and the text colour classes (text-success). Try a badge: span class="badge text-bg-secondary".

Support: Give the class names on the board for the Make task and ask students only to place them.

Exit ticket

Why does class="btn btn-primary" make a blue button when you wrote no CSS?

The linked stylesheet, bootstrap.min.css, has rules for btn and btn-primary; the class names switch them on.

What each step is for

• Predict: Students expect class names to need a rule they wrote; seeing the styled button appear shows that the linked stylesheet brought the rules.
• Run: One link brings a whole stylesheet; each class name switches on one of its rules.
• Investigate: A Bootstrap look comes from a base class (btn, alert) plus a class that picks the colour or size; the names are fixed, so you look them up.
• Modify: Changing a look is choosing a different class name from the set, not writing a new rule.
• a notice for your own event: Goals only: a whole page styled by class names, with no CSS of its own.

Where it leads

Next: the navbar, cards and grid, where Bootstrap parts are whole shapes of nested tags. Class idea: put the hand-built club page and this page side by side and count the lines of CSS.

Sources

• Bootstrap 5.3: Buttons (checked 12 October 2026)