Before you start you should notice that the product images, provided by the holder.js image placeholders as described in Chapter 6, Bootstrappin' Business, are not responsive. Let's make all images responsive by default by adding the following lines of SCSS code to our app.scss file:

// make images responsive by default 
img { 
  @extend .img-fluid;     
} 

The process of making images responsive by default was described in Chapter 1, Getting Started with Bootstrap before. It influence all images. The logo in the also becomes responsive now and ignores the width we've set in the scss/includes/_header.scss file before. You can solve that by putting the SCSS code for the responsive image before the import of the _header.scss file in the app.scss file.

You should also inspect the footer logo after making the images responsive by default. You'll find that the logo does not center anymore. The img-fluid class changes your images into block level element...