It is as straightforward as you would hope, just apply the img-fluid class to the element:

    <div class="col-xs-6 col-sm-3 push-sm-3">
        <img src="images/small.jpg" class="img-fluid">
        <h5>Small</h5>
        <div class="row">
            <div class="col-sm-4">6x5</div>
            <div class="col-sm-4">8x10</div>
            <div class="col-sm-4">11x17</div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3 push-sm-3">
        <img src="images/medium.jpg" class="img-fluid">
        <h5>Medium</h5>
        <div class="row">
            <div class="col-sm-4">12x18</div>
            <div class="col-sm-4">16x20</div>
            <div class="col-sm-4">18x24</div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3 push-sm-3">
        <img src="images/large.jpg" class="img-fluid">
        <h5>Large</h5>
        <div class="row">
            <div class="col-sm-4">19x27</div>
            <div class="col-sm-4">20x30</div>
            <div class="col-md-4">22x28</div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3 pull-sm-9">
        <img src="images/extra-large.jpg" class="img-fluid">
        <h5>Extra Large</h5>
        <div class="row">
            <div class="col-md-4">24x36</div>
            <div class="col-md-4">27x39</div>
            <div class="col-md-4">27x40</div>
        </div>
    </div>

Take a look at the following screenshot:

Figure 2.15: Making images responsive using Bootstrap's img-fluid class results in images that respect the boundaries of parent elements

That is more like it. img-fluid is exceedingly simple in itself, essentially just adding a max-width: 100% rule to the image element. Now, the img element will respect the boundaries of its parent.

However, this simple approach also means that the feature is very basic. The browser still downloads the full resolution image, even though it may only be rendered at a fraction of the size. There are other libraries and services which help resolve the responsive images problem.

Bootstrap does, however, provide a neat mixin to help mitigate issues with retina displays. The img-retina mixin basically extends background-image and background-size rules, by allowing for two images and two sizes to be defined one for standard displays, and one for retina. img-retina takes the form:

    .img-retina(std-res-img, hi-res-img, standard-width, standard-height)

For standard displays, img-retina will set the background-image to std-res-img, with the defined width and height. For retina display, img-retina will set background-image to hi-res-img, with the defined width and height values doubled.

For example, if we wanted to make sure that the Extra Large image loaded at high resolution on retina displays, we could give it a class extra-large-image, and apply that to a div:

    <div class="extra-large-image"></div>

We would define extra-large-image as:

    .extra-large-image {
        .img-retina('/images/extra-large_std-res.png',
        '/images/extra-large_hi-res.png', 700px, 400px)
    }

This will result in /images/extra-large_std-res.png being loaded with the dimensions 700 x 400 at standard resolution, and /images/extra-large_hi-res.png being loaded at 1400 x 800 on retina displays.

Bootstrap also comes with some useful built-in image modifiers namely img-rounded, img-thumbnail, and img-circle. Let's apply these to the images in our example:

    <div class="container">
        <h1>Our Print Sizes</h1>
        <div class="row">
            <div class="col-xs-6 col-sm-3 push-sm-3">
                <img src="images/small.jpg" class="img-fluid
                img-circle">
                <h5>Small</h5>
                ...
            </div>
            <div class="col-xs-6 col-sm-3 push-sm-3">
                <img src="images/medium.jpg" class="img-fluid
                img-rounded">
                <h5>Medium</h5>
                ...
            </div>
            <div class="col-xs-6 col-sm-3 push-sm-3">
                <img src="images/large.jpg" class="img-thumbnail">
                <h5>Large</h5>
                ...
            </div>
            <div class="col-xs-6 col-sm-3 pull-sm-9">
                <img src="images/extra-large.jpg" class="img-fluid">
                <h5>Extra Large</h5>
                ...
            </div>
        </div>
    </div>

Take a look at the following screenshot:

Figure 2.16: Applying Bootstrap's image modifiers: img-rounded, img-circle and img-thumbnail

You may notice that in the previously mentioned code, for the Small and Medium images, we have kept img-fluid, but removed img-fluid from Large. This is because img-thumbnail actually uses img-fluid as a mixin, while img-circle and img-rounded pay zero respect to the parent column width, so the img-fluid class is necessary. These images scale nicely down to xs displays, but it does look a little cluttered on a small viewport.

Take a look at the following screenshot:

Figure 2.17: Dealing with smaller viewports by utilizing Bootstrap's responsive utilities

Bootstrap provides some really useful responsive utilities to tackle the issue of cluttered viewports.