Style by class names
Link Bootstrap's stylesheet, then style buttons, text and messages by adding its class names instead of writing CSS.
Thousands of school, club and company websites use Bootstrap, so their buttons and forms look tidy on phones and computers without much CSS of their own.
You built every part of the club page with your own CSS. Bootstrap is a big stylesheet that someone else wrote, full of ready-made rules. You link it with one line, then style a tag by adding its class names:
<link rel="stylesheet" href="bootstrap.min.css">
<button class="btn btn-primary">Join</button>
bootstrap.min.css sits beside the page here. On your own site, you download it from getbootstrap.com and put it beside your page.
- Predict: Read the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.
- Run: Run it and compare the result with your prediction.
- Investigate: Trace how each line of code connects to what you see.
- Modify: Change the code on purpose and check the result.
- Make: Build something new using what you have learned. Expect a few tries; that is normal.
Make your prediction first. Help opens once you've locked it in.
Predict
<link rel="stylesheet" href="bootstrap.min.css">
<button class="btn btn-primary">Join</button>
<button>Join</button>
The first line links Bootstrap. Neither button has a <style> rule of its own.
Run
Compare with your prediction. Then delete the <link> line and watch everything go plain, though every class name is still there. Put it back.
<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-primary">Join</button>
<button class="btn btn-outline-secondary">Read more</button>
</div>
Investigate
<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-primary">Join</button>
<button class="btn btn-outline-secondary">Read more</button>
</div>
Shape, colour and spacing.
What is a class name on its own?
One button is plain.
Match each class name with what it does.
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.
Modify
Look the names up in the Reference drawer: Bootstrap's class names are fixed, so nobody remembers them all.
Choose different classes.
Need a hint?
Bootstrap names its colours: primary, secondary, success, danger, warning, info.
Another hint
Swap btn-primary for btn-success, and add btn-lg for a large button. Keep btn.
Show the expected result
Same base class, new colour.
Need a hint?
There is already a yellow alert. A red one has the same base class with a different colour class.
Another hint
A div with class="alert alert-danger" under the heading.
Show the expected result
Make Join a large green button.
This ticks when your page has all of the above.
Add a red alert under the heading: The tournament is full.
This ticks when your page has all of the above.
A notice for your own event
A concert, a bake sale, a match: use a container, a lead paragraph, an alert and two buttons in different colours. No <style> block: Bootstrap's classes only.
Style the notice with Bootstrap: a container, a lead paragraph, an alert and two buttons.
This ticks when your page has all of the above.
Where this leads
Next: the club page's navbar, cards and grid, rebuilt with Bootstrap.
For teachers
Students link Bootstrap's stylesheet, predict that a class name with no rule of their own still styles a button, match classes to what they do, find a button missing its base class, and style a notice for an event of their own. About 50 minutes.
Open the teacher guide: answers, solutions, slides and a worksheet.
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.
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
- Predict: ask what a class name does when nobody has written a rule for it.
- Run: have everyone delete the link line and watch the page go plain. The class names are still there.
- Investigate: for the bug, ask which class gives the shape and which gives the colour.
- Modify: point students to the Reference drawer; looking names up is the skill, not remembering them.
- 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
- Nothing looks like Bootstrap. Ask: Is the link line there, at the top, spelt bootstrap.min.css? Fix: Put the link line first, exactly as in the lesson.
- A button keeps the browser's grey look. Ask: Does its class have btn as well as a colour? Fix: class="btn btn-success": the base class and the colour.
- A class does nothing, such as btn-green. Ask: Is that name in Bootstrap's list? Fix: Use the names on the Reference cards (success is green); made-up names are ignored.
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.
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)
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.
- Link Bootstrap's stylesheet to a page.
- Style buttons, text and messages by adding Bootstrap's class names.
- Look up a class name instead of writing a CSS rule.