What is sr-only in Bootstrap 3?

Question

What is the class sr-only used for? Is it important or can I remove it? Works fine without.

Here's my example:

<div class="btn-group">

    <button type="button" class="btn btn-info btn-md">Departments</button>

    <button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown">

    <span class="caret"></span>

    <span class="sr-only">Toggle Dropdown</span>

    </button>

    <ul class="dropdown-menu" role="menu">

        <li><a href="#">Sales</a></li>

        <li><a href="#">Technical</a></li>

        <li class="divider"></li>

        <li><a href="#">Show all</a></li>

    </ul>

</div>

Answer 1

For the inline forms, you can hide the labels using the .sr-only class.

Example for the styling used:

.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0,0,0,0);

  border: 0;

}