Bootstrap 4 comes with a new responsive image class that is super-handy when developing websites or web-based applications. When applying the class img-fluid to an <img> tag, it will automatically set the max-width of the image to 100% and the height to auto. The result will be an image that scales with the size of the device viewport. Here's what the code looks like:

<img src="myimage.jpg" class="fluid-image" alt="Responsive Image"> 

It's as easy as adding that class to the image to trigger the responsive controls. A word of advice: I would recommend making your images a little bit bigger than the maximum size you think you will need. That way, the image will look good on all screen sizes.

Bootstrap allows you to apply three different shape styles to images:

As with the responsive images, all you need to do is add a single CSS class to the <img> tag to apply these styles. The reason you would want to use these classes is to avoid having to actually create these variations in an app such as Photoshop. It's much easier to apply this simple image formatting using code. Here's the code for each variation:

<img src="myimage.jpg" class="img-rounded" alt="Image Rounded"> 
 
<img src="myimage.jpg" class="img-circle" alt="Image Circle"> 
 
<img src="myimage.jpg" class="img-thumbnail" alt="Image Thumbnail"> 

Once you've coded that up, it should look like this in the browser:

The final Bootstrap classes you can apply to images are the alignment classes. They will allow you to align your image to the left, right, or center of your layout. Like the previous examples, you only need to add a single CSS class to the <img> tag to apply the alignment you want. With left and right alignment, you can also provide a column size within the class name. The best policy would be to use the same size as the column the image is contained within. Therefore, if your image is displayed in a column with a class of col-xs-4, then use the -xs unit in the alignment class name. Here's what the left and right alignment code looks like using the extra small size:

<img src="myimage.jpg" class="pull-xs-left" alt="Left Aligned Image"> 

<img src="myimage.jpg" class="pull-xs-right" alt="Right Aligned Image"> 

The final image alignment class you can use is to center the image in the layout. The class name for this is a little bit different, as you can see here:

<img src="myimage.jpg" class="center-block" alt="Center Aligned Image"> 

That concludes the section on image classes that you can use in your Bootstrap layouts. Next we will look at writing and rendering tables using Bootstrap 4.