Bootstrap is the popular HTML, CSS, and JavaScript framework for developing responsive websites.

For quicker mobile development and responsive design there are classes in Bootstrap 3 and Bootstrap 4 for showing and hiding elements by display size and device via media query. There are differences in Display utility classes in Bootstrap 4 version.

The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg are deprecated as of v3.2.0.

Bootstrap 4 Display Utility Classes for Hiding and Showing Elements

To hide elements we will 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.