Skip to content

Bootstrap Exercises

Three exercises. Each one builds on what you have already built — the goal is to make real pages look real.

Exercise 1 — Style the Patient App

Take your patient app from the PookieDB in Flask section — app.py, database.py, and templates/index.html — exactly as they were.

Update only templates/index.html:

  1. Add the Bootstrap CDN link inside <head>
  2. Wrap everything in the <body> with <div class="container mt-4">
  3. Wrap each form field in <div class="mb-3"> and add form-label to the labels, form-control to the inputs
  4. Change the submit button to <button class="btn btn-primary">
  5. Add table table-striped table-bordered to the table

Do not touch app.py or database.py. Run the app, add a few patients, and confirm the page looks polished.

Exercise 2 — Patient Registration Form

Build a standalone HTML page — no Flask, no Python. Just a file called registration.html that you open directly in your browser.

It should look like a form a real clinic could put on a screen. Include fields for:

  • Patient name (text input)
  • Age (number input)
  • Gender (select: Male / Female)
  • Phone number (text input)
  • A submit button

Apply Bootstrap to make it look clean. Requirements:

  • Bootstrap CDN link in <head>
  • form-label and form-control on every field
  • <div class="mb-3"> wrapping each field
  • btn btn-primary on the submit button
  • A heading styled with text-primary
  • The whole form wrapped in <div class="container mt-4">

When you are done, open registration.html in your browser. It should look like something a clinic could actually use.

Exercise 3 — Explore

Go to https://getbootstrap.com/ and find one component you have not used yet. Some starting points:

  • Alert — a coloured message box. Try: <div class="alert alert-success">Patient added successfully!</div>
  • Badge — a small label attached to text, good for counts or status
  • Card — a box with a header and body, great for wrapping a form

Add it to one of your pages from the exercises above. It does not have to do anything functional — just get it appearing correctly styled on the page.

Info

Bootstrap has hundreds of class names and components. You do not need to memorise them — the docs at getbootstrap.com are always there. The goal is knowing they exist and knowing how to reach for them.

← Layout and Text Utilities    Next: What is JavaScript? →