title: Bootstrap 5 - display different responsive images for different breakpoint
body: <p>I'm using bootstrap 5. I want to use an <code>img</code> tag to display a different image for mobile/tablet/desktop. I'm trying with this code but I'm unable to set correctly the breakpoints for the wrapper divs using the <code>display</code> utilities of the bootstrap framework.</p>
  <p>If is possible, I want to have three image tags instead of three different divs that take the 100% of the window height.</p>
  <p>If you see the code, I have a sort of modal to display on top of the background image that needs to fit for each breakpoint all the screen space available. I've tried with <code>img-fluid w-100 h-100</code> classes but the result isn't really nice and I can't crop the background. I'm using vue for the front-end, I'm not a front-end dev.</p>
  <p>Thank you.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;container-fluid p-0&quot;&gt;
      &lt;div class=&quot;row m-0&quot;&gt;
  &lt;!-- This div with the image needs to be displayed only on mobile sm breakpoint --&gt;
        &lt;div class=&quot;col-lg-12 d-md-none d-lg-none d-sm-block p-0&quot;&gt;
          &lt;img class=&quot;img-fluid w-100&quot; src=&quot;@/assets/sm-background.png&quot;&gt;   
        &lt;/div&gt;
  &lt;!-- This div with the image needs to be displayed only on tablet md breakpoint --&gt;
        &lt;div class=&quot;col-lg-12 d-none d-sm-none d-lg-none d-md-block p-0&quot;&gt;
          &lt;img class=&quot;img-fluid w-100&quot; src=&quot;@/assets/md-background.png&quot;&gt;   
        &lt;/div&gt;
  &lt;!-- This div with the image needs to be displayed only on desktop lg breakpoint --&gt;
        &lt;div class=&quot;col-lg-12 d-none d-sm-none d-md-none d-lg-block p-0&quot;&gt;
          &lt;img class=&quot;img-fluid w-100&quot; src=&quot;@/assets/lg-background.png&quot;&gt;   
        &lt;/div&gt;
  
        &lt;div class=&quot;col-sm-12 col-md-6 col-lg-6 mx-auto position-absolute&quot; id=&quot;checkModal&quot;&gt;
          &lt;div class=&quot;card&quot;&gt;
            &lt;div class=&quot;card-body&quot;&gt;
              &lt;h4&gt;Age verification required&lt;/h4&gt;
              &lt;p&gt;...&lt;/p&gt;
              
              &lt;input type=&quot;date&quot; class=&quot;form-control&quot; v-model=&quot;birthDate&quot; &gt;
              
              &lt;input type=&quot;passwrd&quot; class=&quot;form-control&quot; v-model=&quot;passwor&quot; &gt;
  
              &lt;button class=&quot;btn btn-primary&quot; @click.prevent=&quot;unlockContent()&quot;&gt;Conferma&lt;/button&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
    name: 'App',
    data() {
      return {
        birthDate: '',
        password: ''
      }
    },
    mounted() {
  
    },
    methods: {
      unlockContent() {
        console.log(this.birthDate, this.password);
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  /* #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  } */
  #checkModal {
    top: 14%;
    left: 0;
    right: 0;
    z-index: 1;
  }
  &lt;/style&gt;
  
  ´``
  </code></pre>