Toggling visibility

Bootstrap provides several helper classes to allow you to toggle content visibility. Theinvisibleclass sets the element's visibilityproperty tohidden. 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, thesr-onlyclass hides an element except from screen readers; sr-only-focusableextends this functionality so the element...