Bootstrap provides several helper classes to allow you to toggle content visibility. The invisible class sets the element’s visibility property to hidden. Similarly, the visible class sets the visibility property to visible:
.visible {
visibility: visible !important;
}
.invisible {
visibility: hidden !important;
}
To hide just the text within an element, the text-hide class can be used. This class resets the font property and sets the font color to transparent so that any text is no longer visible without it being required to be cleared. The class also ensures that there are no text shadows or borders:
.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
In addition, the sr-only and sr-only-focusable classes ensure that an element is only visible to screen readers, that is, the sr-only class hides an element except from screen readers; sr-only-focusable extends this functionality so the element becomes visible it element becomes focused, for instance, in the case of keyboard access. It is important to keep in mind that both classes must be used together, that is, .sr-only-focusable does nothing if the element does not have the .sr-only class applied to it as well.
A practical example of using the sr-only class is to allow the coupling of an image with a text element. The text will be read by a screen reader, but by using sr-only class it is not visible.
Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.