Extending components using @extend

You can read more about the @extend directive in the Utilizing the @extend directive recipe of Chapter 4, Nested Selectors and Modular CSS. In this recipe, you will see how to use this directive to make all images in your Bootstrap project responsive by default.

Getting ready

You can edit the Bootstrap source Sass files with a text editor. You also have to install Bootstrap and learn how to recompile it. Read the Downloading and installing Bootstrap recipe of this chapter to find out how to install Bootstrap and recompile the Bootstrap CSS code.

How to do it...

In Bootstrap 4, images can be made responsive by adding the .img-fluid to the img tag in your HTML. You can use the following steps to make your images responsive by default:

1. Before you start, install Bootstrap as described in the Downloading and installing Bootstrap recipe of this chapter.
2. Then, open the scss/bootstrap.scss file and write the following lines of SCSS code at the end of this file:

   img...