← Teacher guides

Teacher guide: Pages with Bootstrap

Rebuild the club page with Bootstrap's ready-made parts: buttons, a navbar, cards, a grid and a form, styled by class names instead of your own CSS. Then compare it with the hand-built page and make Bootstrap look like yours.

Open the student course

Each lesson works two ways. Students can work through the online tutorial at their own pace (it checks their answers and saves their progress in their browser), or you can teach it to the whole class from the slides, then send students into the tutorial for the Modify and Make steps.

Every lesson guide has plain-language notes, the answers to every check, a solution for every task, and slides and a worksheet for Waypoints Prepare. These guide pages are not linked from student pages, but they are not secret either: keep printed Teacher editions for answers you do not want students to find.

Whole-course cheat sheet: Open to print (every command, grouped by unit: a handout for the final challenge)

Ready-made parts

Link Bootstrap's stylesheet, style by class names, rebuild the club page's parts, then put your own CSS on top.

Bootstrap in 5 minutes (read before teaching this unit)

The idea in plain words

Bootstrap is a stylesheet: one big CSS file that someone else wrote, full of rules for buttons, menus, cards, forms and a layout grid. A page links it with one line, <link rel="stylesheet" href="bootstrap.min.css">, and then styles tags by adding its class names: class="btn btn-primary" makes a blue button. Students write no CSS for it; they look the names up. Each larger part is a shape of nested tags (a row holds cols, a card holds a card-body) that they copy and fill in. Their own rules go after the link, because when two rules match equally the later one wins.

Why programmers use it

  • Speed: a tidy page that works on phones and computers in minutes.
  • Consistency: every button, card and form matches.
  • Shared language: a team, or a student and a teacher, can say "a card in a col" and mean the same thing.

The cost: a large file to load, class names to learn, and pages that look like many other sites until you add your own rules.

An everyday picture, and where it breaks

Flat-pack furniture: the parts are made and labelled for you; you choose them and put them together, and you can paint them afterwards. It breaks because furniture parts fit only one way, while Bootstrap ignores a misspelt label silently (column instead of col just does nothing).

Try it yourself (5 minutes)

  1. In the Bootstrap playground, change btn-primary to btn-danger, then delete the link line and watch the styling vanish.
  2. Copy the card shape from the Reference page into a row, three times.
  3. Add a <style> block after the link with .card { border-color: orange; }, then move it above the link.

Questions students ask

  • Why doesn't my class work? It is not one of Bootstrap's names, or a base class is missing (btn as well as btn-primary).
  • Why doesn't my CSS win? It comes before the link, or the Bootstrap class is a utility (bg-…, mt-…), which always wins.
  • Is Bootstrap the only one? No. Bulma works the same way; Tailwind uses one class per CSS property; daisyUI puts component names on Tailwind; Pico styles plain tags with no classes. The last lesson shows all four.

How it connects

It rebuilds the club page from HTML & CSS (the final challenge) with ready-made parts, so students compare the two directly. The grid is Flexbox inside. Vue, after the DOM course, is the same idea for JavaScript: a framework that does the repetitive work for you.

Cheat sheet: Open to print (A4, with a picture of what each command draws) · Markdown