How to show something only on a certain screen size in Bootstrap?

I want to be able to show an image in the html only on md screens. I was thinking about hiding the image from sm and down, and hiding from lg and up.

How can I do this?

Solution

In Bootstrap v4+, you can use the classes d-none d-md-block d-lg-none to make the content only visible on medium (md) screen sizes.

d-none - Hidden on all viewports

d-md-block - Visible on medium and above

d-lg-none - Hidden on large and above

<div class="d-none d-md-block d-lg-none">
  <img src="" alt="alternate text" />
</div>

From the docs:

To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.

To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices.