Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • sr-only class in Bootstrap3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.10k
    Comment on it

    Hi there.

    We are all familiar with the bootstrap sr-only class.

    The name expands to screen readers only.

    According to the documentation of Bootstrap, the information which is meant only for the screen readers can be hidden from the layout of the page using the class sr-only.

    Sr-only class is necessary to include.  Excluding it may cause trouble.

    Viewing forms will become a problem for screen readers if we do not include a label for every input. Although labels can be hidden using the .sr-only class but only for the inline forms.


    Here is the default styling used:

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        border: 0;


    The layout works fine without sr-only, so many users think of skipping it. But don’t.

    It is important even though it’s presence doesn’t really shows any effect.


    Considering screen readers is always important for accessibility purposes. With usage of this  class, you wouldn't really see a visual difference.

    It will simply hide the skip link. Although this approach is fine only for screenreader users, and not for keyboard-only users.


    Keep Coding.

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: