O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 7. Bootstrappin' E-Commerce

Having built our business home page, it's time to design our online store.

We'll build on the design from the previous chapter, adding a new page with the following elements:

  • A grid of product thumbnails, titles, and descriptions
  • A left-hand sidebar with options to filter our products by category, brand, and so on
  • Breadcrumbs and pagination to ease navigation through our inventory

Take a few moments to visit websites such as Zappos (http://www.zappos.com) and Amazon (http://www.amazon.com). Search or browse for products and you will see product grids with features similar to what we will be creating in this chapter.

When complete, we want our products page to look like the following screenshot on medium, large and ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required