Visibility Classes
Visibility classes let you show or hide elements based on screen size or device orientation. You can use visibility classes to control which elements users see depending on their browsing environment.
Hide and Show Elements With Ease
This text is shown only on a small screen. This text is shown on medium screens and up. This text is shown only on a medium screen. This text is shown on large screens and up. This text is shown only on a large screen. This text is shown on xlarge screens and up. This text is shown only on an xlarge screen. This text is shown on xxlarge screens and up.
Show by Screen Size
In this example, we use the show visibility classes to show certain strings of text based on the device on which users view a page. If their browser meets the class's conditions, the element will be shown. If not, it will be hidden.
This text is show for small screens and up. This text is shown only on a small screen. This text is shown on medium screens and up. This text is shown only on a medium screen. This text is shown on large screens and up. This text is shown only on a large screen. This text is shown on xlarge screens and up. This text is shown only on an xlarge screen. This text is shown on xxlarge screens and up. This text is shown only on an xxlarge screen.
Hide by Screen Size
This example shows the opposite: It uses the hide visibility classes to state which elements should disappear based on your device's screen size or orientation. Users will see elements on every browser except those that meet these conditions.
Orientation Detection
This straightforward example shows how two strings of text determine whether or not an element is visible in different orientations. This will change on mobile devices when you rotate the device. On desktop, the orientation is almost always reported as landscape.