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

Adjusting the products grid

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 ...

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