How to set a separate image for a computer and a separate one for a phone in the header on bootstrap?

Question

css

Here on this example On the phone you need to display a different photo

Answer 1

This is how it's done

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

By the way, it's pretty easy to google. And watch the video of adequate developers, like Vadim Makeev. At least teach something Zhenya Zaletsky Alexander Osadchiy ))

Answer 2

Through @media, if I correctly understood the essence of your question.

Answer 3

<div class="carousel-item active" role="listbox">
  <img src="img/slider/header.jpg" class="desktop">
  <img src="img/slider/header2.jpg" class="mobile">
</div>

<style>
  img.desktop {
    display: block;
  }

  img.mobile {
    display: none;
  }

  @media (max-width: 768px) {
    img.desktop {
      display: none;
    }

    img.mobile {
      display: block;
    }
  }
</style>

You were correctly answered above .. based on your example ..