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>
Best Answer
According to bootstrap's documentation, the class is used to hide information intended only for screen readers from the layout of the rendered page.
Here is an example styling used:
It's important, don't remove it.
You should always consider screen readers for accessibility purposes. Usage of the class will hide the element anyways, therefore you shouldn't see a visual difference.
If you're interested in reading about accessibility:
Web Accessibility Initiative (WAI)
MDN Accessibility documentation