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

Summary

In this chapter, we have employed Bootstrap styles to quickly set up breadcrumbs, a page title, and pagination customized according to our needs. Then we created a visually pleasing grid of product items, all of the same height so as to ensure a regular grid by using Bootstrap's mobile first and responsive grid styles.

We finished our design by adding a complex Clearance Sale button with a $brand-feature red background color and a list of filter options that are easily clickable. We also used Bootstrap column classes with responsive adjustments to arrange our options list items optimally for multiple viewport widths.

At the end, we also added a search form with an autocomplete function.

Congratulations! We now have an attractive business ...

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