.sr-only the CSS class of the Bootstrap library is used to make things disappear on computer screens only. Is there any opposite class for it to make things disappear on mobiles only?

I know there could be several workarounds using Javascript scripts. These are acceptable if and only if there is no opposite.

.sr-only the CSS class of the Bootstrap library is used to make things disappear on computer screens only. Is there any opposite class for it to make things disappear on mobiles only?

I know there could be several workarounds using Javascript scripts. These are acceptable if and only if there is no opposite.

• javascript
• html
• css
• twitter-bootstrap

• 2 sr-only is a class used to hide text which is placed for screen readers. It is not visible on computer screens or mobiles. See stackoverflow.com/questions/19758598/…. You really should be using the Bootstrap grid system. What exactly are you trying to do? – Matt Commented Jun 18, 2014 at 15:20
• I don't think .sr-only does what you think it does. The .hidden-xs class that is built into bootstrap is probably what you want: getbootstrap.com/css/#responsive-utilities – Steve Sanders Commented Jun 18, 2014 at 15:29
• @sdsanders isn't there any for extra small and small? I mean visible on xs and s and hidden on md and lg ? – Mohammad Areeb Siddiqui Commented Jun 18, 2014 at 16:36
• 1 @MohammadAreebSiddiqui - yes, you just apply multiple classes. class="visible-xs visible-sm" – Steve Sanders Commented Jun 18, 2014 at 16:41
• @sdsanders post that as answer so that I could accept it. :) – Mohammad Areeb Siddiqui Commented Jun 18, 2014 at 16:54

3 Answers 3

Bootstrap responsive utilities will handle this: http://getbootstrap.com/css/#responsive-utilities

Hide on extra small screens screens (less than 768px):

class="hidden-xs"

Show on extra small and small screens (less than 992px):

class="visible-xs visible-sm"

Using Bootstrap 4 you could use class="d-md-none". As this would set display:none to the element from the md width and up.

If you want to display the element only on large and medium screens and hide on small and extra-small screens this are the classes you have to add in the element using bootstrap v4: d-none d-md-block.

Here is the full answer for your question if you are using Bootstrap v4: https://getbootstrap.com/docs/4.4/migration/#responsive-utilities