What is sr-only CSS class in twitter bootstrap 3 or 4?

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 4

 

.sr-only Twitter bootstrap 3 example screenshot:

sr-only twitter bootstrap 3

Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *