0 votes
1 view
in Web Technology by (22.4k points)

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>


    <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>



1 Answer

0 votes
by (40.3k points)

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;


Welcome to Intellipaat Community. Get your technical queries answered by top developers !