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 website with a well-crafted e-commerce section.
Next, let's take our skills another step forward by rebuilding our project with Angular 2.
