Students put their own CSS after the Bootstrap link, predict that their later rule wins, sort jobs into Bootstrap or hand-built CSS, find a style block in the wrong place, meet Bulma, Tailwind, daisyUI and Pico, and give a Bootstrap club page a look of its own.
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 10 min · Other frameworks 10 min · Modify 10 min · Make 15 min
Read the unit primer first. The rule students need is the cascade they met in HTML & CSS: when two rules match a tag equally (same kind of selector), the later one wins. So the Bootstrap link goes first and the student's <style> block after it. The planted bug puts the style block first, and Bootstrap's h1 rule then wins.
Two catches you may meet. Bootstrap's spacing and colour utility classes (bg-body-tertiary, mt-3, text-center) are marked important and beat ordinary rules wherever they are, so the run page takes bg-body-tertiary off the navbar before giving it a colour. And a button's hover colour is a separate, stronger rule (.btn:hover), so restyling buttons is fiddly; the tasks avoid it on purpose.
Other frameworks. Bootstrap is one of many. Bulma works the same way with different names (button is-primary). Tailwind, very popular for new projects, has no ready-made parts: each class sets one CSS property (bg-blue-600, px-4), and a build tool writes CSS for just the classes a site uses. Here a browser version of Tailwind (tailwind.js) does that as the page loads; Tailwind's makers say it is for trying things, not real sites. daisyUI adds Bootstrap-style names (btn btn-primary) on top of Tailwind. Pico is classless: it styles plain tags, so a page needs no class names at all. Every one of them is served from this site.
When a rule does nothing, students add more rules. Ask "which rule is winning, and why?" and have them check the order before writing anything new.
| What you will see | A question to ask | The fix |
|---|---|---|
| A rule of their own does nothing. | Is the style block after the link? | Move the link line to the top. |
| The navbar colour will not change. | Does the navbar have a bg- class? | Take the bg- class off; Bootstrap's utility classes beat ordinary rules. |
| A button changes colour but goes back to blue when the mouse is over it. | Which rule styles a button under the mouse? | That is .btn:hover; use a Bootstrap colour class instead (btn-success), or leave buttons alone. |
| Tailwind classes do nothing. | Is the tailwind.js script on the page? | Add script src="tailwind.js"; without it there is no Tailwind CSS at all. |
One possible solution for each task. Other correct programs are fine.
<link rel="stylesheet" href="bootstrap.min.css">
<style>
body { font-family: Georgia, serif; }
.navbar { background-color: lightblue; }
.navbar-brand { color: white; font-weight: bold; }
.card { border: 2px solid teal; }
.card-title { color: teal; }
</style>
<nav class="navbar navbar-expand">
<div class="container">
<a class="navbar-brand" href="#">Chess club</a>
</div>
</nav>
<div class="container mt-3">
<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>
<a class="btn btn-primary" href="#">Join</a>
</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>
<a class="btn btn-primary" href="#">Join</a>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="bootstrap.min.css">
<style>
body { font-family: Georgia, serif; }
.navbar { background-color: lightblue; }
.card { border: 2px solid teal; border-radius: 0; }
.card-title { color: teal; }
</style>
<nav class="navbar navbar-expand">
<div class="container">
<a class="navbar-brand" href="#">Chess club</a>
</div>
</nav>
<div class="container mt-3">
<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>
<a class="btn btn-primary" href="#">Join</a>
</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>
<a class="btn btn-primary" href="#">Join</a>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="bulma.min.css">
<div class="section">
<button class="button is-success is-large">Join</button>
</div>
<link rel="stylesheet" href="bootstrap.min.css">
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e7; }
.navbar { background-color: darkorange; }
.navbar-brand { color: white; font-weight: bold; }
.card { border: 3px solid darkorange; border-radius: 0; }
</style>
<nav class="navbar navbar-expand">
<div class="container">
<a class="navbar-brand" href="#">Bake sale club</a>
</div>
</nav>
<div class="container mt-3">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Bakers</h5>
<p class="card-text">Bake on Thursday.</p>
<a class="btn btn-warning" href="#">Join</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Sellers</h5>
<p class="card-text">Sell on Friday.</p>
<a class="btn btn-warning" href="#">Join</a>
</div>
</div>
</div>
</div>
</div>
Stretch: Rebuild one club card in Tailwind using only utility classes, then in daisyUI with card and card-body. Which took fewer classes? Which would be easier to change across a whole site?
Support: Give students three rules on the board (a font, a navbar colour, a border) and ask them only to place and change them.
Your rule .card { border-color: teal; } does nothing. What is the first thing to check?
Whether the style block comes after the Bootstrap link; when two rules match equally, the later one wins.
This is the end of the Bootstrap course. The DOM course makes pages react; Vue does for JavaScript what Bootstrap does for CSS, ready-made ways to build an app. Class discussion: a framework saves time and makes sites look alike; which matters more for a club page, and for a company?