Students rebuild the club page's navbar and cards with Bootstrap, predict how the grid places three cols, count the CSS the page no longer needs, find a made-up class name, add buttons and a sign-up form, and finish with a table and footer.
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.
Predict and Run 10 min · Investigate 15 min · Modify 15 min · Make 15 min
Read the unit primer first. Each Bootstrap component is a shape: tags nested in a fixed order, each with its class (navbar > container > navbar-brand and navbar-nav; row > col > card > card-body). Students do not invent these; they copy the shape from the Reference card or getbootstrap.com and change the words. The grid: a row lines up its cols and shares the width equally (it is Flexbox inside, the same idea as their hand-built .cards { display: flex; }).
The navbar uses navbar-expand, so it never folds into a menu button: folding needs Bootstrap's JavaScript, which this course leaves out. The planted bug is a made-up class name (column): the browser ignores names it has no rule for, silently. This is the most common Bootstrap slip.
Students guess class names (column, blue, big-button) and expect them to work. Ask "is that name on the Reference card?" every time, rather than correcting it for them.
| What you will see | A question to ask | The fix |
|---|---|---|
| A card fills the whole width while the others share a line. | Is its box's class exactly col? | Use col, not column or cols; only Bootstrap's own names do anything. |
| Cards stack one under another. | Are the cols inside one row? | Put every col straight inside the same div with class row. |
| Text touches the card's border. | Is there a card-body inside the card? | Wrap the card's content in div class="card-body". |
One possible solution for each task. Other correct programs are fine.
<link rel="stylesheet" href="bootstrap.min.css">
<nav class="navbar navbar-expand bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">Chess club</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#groups">Groups</a></li>
<li class="nav-item"><a class="nav-link" href="#join">Join</a></li>
</ul>
</div>
</nav>
<div class="container mt-3" id="groups">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<img src="star.svg" alt="A star" width="40">
<h5 class="card-title">Beginners</h5>
<p class="card-text">Learn the moves.</p>
<a class="btn btn-primary" href="#join">Join</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<img src="medal.svg" alt="A medal" width="40">
<h5 class="card-title">Players</h5>
<p class="card-text">Weekly games.</p>
<a class="btn btn-primary" href="#join">Join</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<img src="trophy.svg" alt="A trophy" width="40">
<h5 class="card-title">Champions</h5>
<p class="card-text">School tournaments.</p>
<a class="btn btn-primary" href="#join">Join</a>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="bootstrap.min.css">
<nav class="navbar navbar-expand bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">Chess club</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#groups">Groups</a></li>
<li class="nav-item"><a class="nav-link" href="#join">Join</a></li>
</ul>
</div>
</nav>
<div class="container mt-3" id="groups">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Beginners</h5>
<p class="card-text">Learn the moves.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Players</h5>
<p class="card-text">Weekly games.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container mt-3" id="join">
<h2>Join the club</h2>
<form>
<label for="name" class="form-label">Name</label>
<input id="name" type="text" class="form-control">
<label for="group" class="form-label mt-2">Group</label>
<select id="group" class="form-select">
<option>Beginners</option>
<option>Players</option>
</select>
<button class="btn btn-primary mt-3">Join</button>
</form>
</div>
<link rel="stylesheet" href="bootstrap.min.css">
<div class="container mt-3">
<h2>Results this term</h2>
<table class="table table-striped">
<tr>
<th>Player</th>
<th>Wins</th>
</tr>
<tr>
<td>Ada</td>
<td>5</td>
</tr>
<tr>
<td>Sam</td>
<td>4</td>
</tr>
</table>
</div>
<footer class="container p-3 bg-body-tertiary">
<p>Contact: chess@example.com</p>
</footer>
Stretch: Give the cards different widths with col-8 and col-4 (a row is 12 parts), or add a badge to a card title. Try an image across the top of a card with card-img-top.
Support: Give students the card shape on paper with blanks for the class names.
What goes inside a row, and what goes inside a col?
Cols go inside a row and share its width; the content, such as a card, goes inside a col.
Next lesson: your own CSS on top of Bootstrap, and when writing CSS by hand is the better choice. Class idea: hold up the hand-built club page and this one and ask which was quicker, and which is more theirs.