Creating a perfect mobile-friendly website can be challenging, as different elements behave differently depending on the screen sizes.
One of the easiest adopted ways to create a mobile-friendly website is to hide and show elements. We can do this either with CSS, or with Bootstrap 4.
Two different properties in CSS let us hide elements:
visibility: hidden;: This property removes the element from the document flow and leaves a big hole in its place. However, other elements behave as if the hidden element is still there.
display: none;: This property removes the element from the document flow, and other elements behave as if the hidden element is not there.
Note: We can build a mobile-friendly website by hiding some elements in a certain breakpoint, and replacing them with other elements that fit in that particular breakpoint.
There are two ways of hiding elements in Bootstrap 4:
visibility: hiddento the element. Thus, it removes the element from the document flow, and leaves a big hole in its place.
d-*-noneclass: The asterisk (
*) in the
d-*-noneclass represents the four responsive screen size options available in Bootstrap 4:
xl. Adding any of these to this class will automatically hide the specified screen size elements.
The table below shows how to hide elements on various screen sizes:
|Hidden on all||
|Hidden only on xs||
|Hidden only on sm||
|Hidden only on md||
|Hidden only on lg||
|Hidden only on xl||
.invisibleclass. This hides the element, and leaves a hole in its place in the document flow.
d.noneclass. This hides the element on all devices, without leaving a hole in its place.
Note: We can change the classes in the code widget above to see their effects.
View all Courses