Bootstrap - show different image by resolution / by break point (Responsive breakpoints)

Hello.

i am using bootstrap 4 and i would need to change the image based on the resolution / device. I tried it with "Display property", but it doesn't work the way I want:

< div class="col-md-4 col-sm-12 d-none d-lg-block d-xl-block">
< img src="x.png" class="img-fluid">
< /div>

< div class="col-md-4 col-sm-12 d-none d-xs-block d-sm-block d-md-block">
< img src="y.png" class="img-fluid">
< /div>

The goal is that at low resolution I want to display the image y.png and at higher resolution I want the image x.png (break point lg + xl).

Thanks

REPLY

Hi,

it doesn't matter if you have bootstrap 4 directly there, you just need to define the class in css according to the bootstrap break point, this way the image y will be displayed at high resolution (from min-width: 992px) and the image x at lower resolution (up to max-width: 991.98 px).

HTML

< div class="col-md-4 col-sm-12 img-break-lg">
< img src="y.png" class="img-fluid">
< /div>

< div class="col-md-4 col-sm-12 img-break-md">
< img src="x.png" class="img-fluid">
< /div>

CSS

@media (min-width: 992px) {
.img-break-lg {
display: block;
}
.img-break-md {
display: none;
}
}


@media (max-width: 991.98px) {
.img-break-lg {
display: none;
}
.img-break-md {
display: block;
}
}