In this tutorial we will learn How to display different images in mobile and desktop devices bootstrap4. Below code example help to use two different size image dimension with bootstrap class.

In Bootstrap 4, you can use the classes provided by the framework to display different images in mobile and desktop devices. To achieve this, you can use the d-none and d-* classes.

Here’s an example of how you can use these classes to display different images:

<div class="d-none d-md-block">
  <img src="desktop-image.jpg" alt="Desktop Image">
</div>
<div class="d-block d-md-none">
  <img src="mobile-image.jpg" alt="Mobile Image">
</div>

In this example, the first div element is set to d-none d-md-block, which means it will be hidden on mobile devices and displayed only on devices with a minimum screen width of 992px (md stands for medium). The second div element is set to d-block d-md-none, which means it will be displayed on mobile devices and hidden on devices with a minimum screen width of 992px.

By using these classes, you can control the visibility of your images based on the screen size of the device and ensure that the appropriate image is displayed on each device type.

below live example code here