What is sr-only CSS class in twitter bootstrap 3 or 4?
As per official bootstrap documentation about “sr-only CSS class”:
Always add labels
Screen readers will have trouble with your forms if you don’t include a label for every input. For these inline forms, you can hide the labels using the .sr-only css class.
Thus, it is mainly for screen readers. using .sr-only css class with labels will hide them and they won’t appear on any device, still screen readers can read them, its a feature which fulfills the accessibility purpose of your website.
Reference links:
https://getbootstrap.com/docs/3.3/css/#forms-inline
https://getbootstrap.com/docs/4.0/utilities/screenreaders/
.sr-only Twitter bootstrap 4 example screenshot:
.sr-only Twitter bootstrap 3 example screenshot:
Leave a Reply