# Exercise: Bootstrap

Build a four-page bookstore with Bootstrap 5, with a navbar, a carousel, a table of books with a paging button group, and two forms, and check it at every screen size.

Apprentice · CSS · HTML · Web Development · Updated October 30, 2026

BookNook is a small online bookstore, and it needs a website. In this exercise you'll build its four pages with Bootstrap: a home page with a carousel of featured books, a table of every book, and two forms. In *Exercise: BooksPlus*, you'll build pages like these, a carousel of featured books and a table of every book, as a working ASP.NET Core app that reads them from a database.

## Get the exercise files

Open this lesson's GitHub repository, [github.com/ask-codey/exercise-bootstrap](https://github.com/ask-codey/exercise-bootstrap), also linked from the **Exercise** box beside the lesson. Click **Code**, then **Download ZIP**, and unzip it into your `bootcamp` folder. Open the folder in VS Code.

| File | What it is |
|---|---|
| `index.html` | the home page, with Bootstrap and the navbar already set up: copy it to start every page |
| `styles.css` | for your own styles, loaded after Bootstrap's |
| `books.json` | the four books: title, price, description and cover |
| `images` | the four covers |

Right-click `index.html` and choose **Open with Live Server**.

## The pages

1. **Home** (`index.html`): a carousel that rotates through the four books. Each slide shows the cover, the title, the price, the description and a **Buy Now** button.
2. **Books** (`books.html`): a table with a row per book: the cover, title, price, description and a **Buy Now** button. Under it, a button group for paging (Previous, 1, 2, Next). It doesn't need to work yet.
3. **Profile** (`profile.html`): a form with first name, last name, email address, street address, city, a drop-down list of states, and ZIP code.
4. **Change Password** (`change-password.html`): a form with the current password, the new password, and the new password again.

Every page has the navbar, with a link to each page, and the current page marked `active`.

## Hints

- **Start from the documentation.** Bootstrap's pages for [carousel](https://getbootstrap.com/docs/5.3/components/carousel/), [button group](https://getbootstrap.com/docs/5.3/components/button-group/) and [forms](https://getbootstrap.com/docs/5.3/forms/layout/) have examples to copy and adapt.
- **The carousel needs Bootstrap's JavaScript**, already linked at the bottom of `index.html`. Give the carousel an `id`, and point its Previous and Next buttons at it with `data-bs-target`.
- **Lay out the slides with the grid**: the cover in a `col-md-4` and the text in a `col-md-8`, so they stack on a phone.
- **The profile form looks best in a grid too**: `<form class="row g-3">`, with each field in a column, such as `col-md-6` for first and last name side by side.
- **Pictures:** `img-fluid` keeps an image inside its column, and `rounded` and `shadow` make the covers look like books.

## Check your work

There are no tests for a design; check it yourself:

- Open each page at phone, tablet and desktop widths: make the browser narrower and wider, or open the developer tools (**F12**) and the device toolbar (**Ctrl+Shift+M**). The navbar folds into a menu button on a phone, and the layouts stack.
- Every link in the navbar works, on every page.
- Every image has an `alt` text, and every form field has a `label` linked to it with `for`.

## Submit your exercise

The exercise is how you finish this lesson. When your work is done, put it on GitHub in a repo of your own, then submit that repo's address here.

1. On GitHub, click **+**, then **New repository**. Name it (for example `exercise-bootstrap`), choose **Public**, and click **Create repository**. Leave out the README: your folder already has one.
2. In a terminal in your exercise folder (Git Bash on Windows), send your work to your new repo. If you downloaded the ZIP:

   ```bash
   git init -b main
   git add .
   git commit -m "My solution"
   git remote add origin https://github.com/your-name/exercise-bootstrap.git
   git push -u origin main
   ```

   If you cloned the starter instead, point your copy at your own repo, then commit and push:

   ```bash
   git remote set-url origin https://github.com/your-name/exercise-bootstrap.git
   git add .
   git commit -m "My solution"
   git push -u origin main
   ```

3. Paste your repo's address, such as `https://github.com/your-name/exercise-bootstrap`, into **Submit your exercise** on this page. The site checks that the repo is public and holds your commits, and then the lesson is complete.

Changed something after you submitted? Push it, and submit again: your latest submission is the one that counts.

## So what

Four pages, built almost entirely from Bootstrap's classes, that work on every screen: this is how a lot of real business sites start, and soon you'll fill these pages with data from a database.

## Key terms

- [Bootstrap Grid](https://www.ask-codey.com/glossary/bootstrap-grid)
- [Bootstrap Component](https://www.ask-codey.com/glossary/bootstrap-component)
- [Utility Class](https://www.ask-codey.com/glossary/utility-class-css)
- [Responsive design](https://www.ask-codey.com/glossary/responsive-design)

## Related

- [The Grid System](https://www.ask-codey.com/lessons/bootstrap-the-grid-system)
- [Components](https://www.ask-codey.com/lessons/bootstrap-components)
- [Utility Classes](https://www.ask-codey.com/lessons/bootstrap-utility-classes)

Source: https://www.ask-codey.com/lessons/exercise-bootstrap