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

That results in the following screenshot:

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.