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

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, 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, button group and forms 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:

    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:

    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

Related