Bootstrap 4 – Image elements

As a next step, let’s add an image to each column in our grid. Each image will act as a category heading, as well as allow us to display our photographic wares. The images used in the following part, and throughout the rest of the book, are provided in this book. Take a look at the following code:

<div class="col-sm-3">
    <img src="images/small.jpg">
    <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-sm-3">
    <img src="images/medium.jpg">
    <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-sm-3">
    <img src="images/large.jpg">
    <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-sm-3">
    <img src="images/extra-large.jpg">
    <h5>Extra Large</h5>
    <div class="row">
        <div class="col-md-4">24x36</div>
        <div class="col-md-4">27x39</div>
        <div >27x40</div>
    </div>
</div>

That results in the following screenshot:

Figure 2.14: An unexpected outcome: Adding an image to the column in each grid results in the images failing to respect the boundaries of parent columns (example13.html)

That isn’t what we expected. As you can see, images do not respect the boundaries of the parent column. Obviously, we can fix this with some styling, but we don’t need to do that from scratch. Bootstrap comes with a class to handle this case, called img-fluid.

Responsive images

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

<div class="col-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-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-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-sm-3 ">
    <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 >27x40</div>
    </div>
</div>

Take a look at Figure 2.15:

Figure 2.15: Making images responsive using Bootstrap’s img-fluid class results in images that respect the boundaries of parent elements (example14.html)

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

Responsive images in Bootstrap 3

Images in Bootstrap 3 were made responsive using the img-responsive class. The img-fluid class in Bootstrap 4 is, in essence, the equivalent of img-responsive, just with a different name.

However, this simple approach also means that the feature is very basic. The browser still downloads the full resolution image, even though it may be rendered a fraction of the size. There are other libraries and services that 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 the 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 following form:

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

For standard displays, img-retina will set 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 ensure that the Extra Large image is loaded in high resolution on retina displays, we could give it an extra-large-image class and apply that to a div:

<div ></div>

Using Sass, we would define extra-large-image as shown:

.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 700 x 400 dimensions in standard resolution and /images/extra-large_hi-res.png being loaded in 1400 x 800 on retina displays.

The Z-Index

When examining the Bootstrap code, as we have done in this chapter, you may note the repeated use of the z-index CSS property. This property allows one to control the stack order of elements. For example, one the element could be placed in front of another element sharing its x and y coordinates, by increasing the z-index of the element to be placed in front.

Image modifiers

Bootstrap also comes with some useful built-in image modifiers, namely, rounded, img-thumbnail, and rounded-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-sm-3">
            <img src="images/small.jpg" class="img-fluid rounded-
            circle">
            <h5>Small</h5>
            ...
        </div>
        <div class="col-sm-3">
            <img src="images/medium.jpg" class="img-fluid rounded">
            <h5>Medium</h5>
            ...
        </div>
        <div class="col-sm-3">
            <img src="images/large.jpg" class="img-thumbnail">
            <h5>Large</h5>
            ...
        </div>
        <div class="col-sm-3 ">
            <img src="images/extra-large.jpg" >
            <h5>Extra Large</h5>
            ...
        </div>
    </div>
</div>

Take a look at Figure 2.16:

Figure 2.16: Applying Bootstrap’s image modifiers: rounded, rounded-circle, and img-thumbnail (example15.html)

You may note 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 an img-thumbnail actually uses img-fluid as a mixin, while rounded-circle and rounded pay zero respect to the parent column width, so the img-fluid class is necessary. These images nicely scale down to xs displays, but it does look a little cluttered on a small viewport. Consider Figure 2.17:

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

Apart from the rounded-circle and rounded classes, Bootstrap also offers classes for rounding per side: up, down, left, or right. For example, the rounded-top class rounded the top corners of an element. Similarly, the rounded-bottom class would round the element’s bottom corners by setting the border-bottom-right-radius and border-bottom-left-radius properties to 0.25 rem.

Let’s apply the classes with the following in mind:

  • The image for the Small category has its right corners rounded
  • The image for the Medium category has its left corners rounded
  • The image for the Large category has its bottom corners rounded

Observe the following code:

<div class="container">
    <h1>Our Print Sizes</h1>
    <div class="row">
        <div class="col-sm-3">
            <img src="images/small.jpg" class="img-fluid rounded-  
            right">
            <h5>Small</h5>
            ...
        </div>
        <div class="col-sm-3">
            <img src="images/medium.jpg" class="img-fluid rounded-       
            left">
            <h5>Medium</h5>
            ...
        </div>
        <div class="col-sm-3">
            <img src="images/large.jpg" class="img-fluid rounded-    
            bottom">
            <h5>Large</h5>
            ...
        </div>
        <div class="col-sm-3">
            <img src="images/extra-large.jpg" >
            <h5>Extra Large</h5>
            ...
        </div>
    </div>
</div>

Comments are closed.