← Code

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.

Start1. Style by class names

Ready-made parts

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

1Style by class namesNot started

Link Bootstrap's stylesheet, then style buttons, text and messages by adding its class names instead of writing CSS.

  1. Predict
  2. Run
  3. Investigate › Which class does what?
  4. Investigate › No link
  5. Investigate › Spot the bug
  6. Modify › Green and large
  7. Modify › A red alert
  8. A notice for your own event
  9. Where this leads
Start lesson
2Navbar, cards and a gridNot started

Rebuild the club page's menu, cards and form with Bootstrap: each part is a fixed shape of nested tags with class names, and the grid's row and col line the cards up.

  1. Predict
  2. Run
  3. Investigate › Name the parts
  4. Investigate › Count the CSS
  5. Investigate › Spot the bug
  6. Modify › A button in each card
  7. Modify › A sign-up form
  8. Results and a footer
  9. Where this leads
Start lesson
3Make Bootstrap yoursNot started

Put your own CSS after the Bootstrap link so your rules win, compare Bootstrap with the page you built by hand, and meet the other ways of styling: Bulma, Tailwind, daisyUI and Pico.

  1. Predict
  2. Run
  3. Investigate › Bootstrap or by hand?
  4. Investigate › Spot the bug
  5. Other frameworks › Bulma
  6. Other frameworks › Tailwind
  7. Other frameworks › Sort them
  8. Modify › The club's name
  9. Modify › Square corners
  10. Modify › Try Bulma
  11. Your own look
  12. Where this leads
Start lesson

Progress is saved in this browser only. Nothing is sent anywhere.

For teachers: Teacher guide (notes, answers, solutions, slides and worksheets)