4

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

Chris Martin
  • 28,558
  • 6
  • 66
  • 126
Mohammad Areeb Siddiqui
  • 9,083
  • 10
  • 62
  • 108
  • 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 http://stackoverflow.com/questions/19758598/what-is-sr-only-in-bootstrap-3. You really should be using the Bootstrap [grid system](http://getbootstrap.com/css/#grid). What exactly are you trying to do? – Matt Jun 18 '14 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: http://getbootstrap.com/css/#responsive-utilities – Steve Sanders Jun 18 '14 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 Jun 18 '14 at 16:36
  • 1
    @MohammadAreebSiddiqui - yes, you just apply multiple classes. `class="visible-xs visible-sm"` – Steve Sanders Jun 18 '14 at 16:41
  • @sdsanders post that as answer so that I could accept it. :) – Mohammad Areeb Siddiqui Jun 18 '14 at 16:54

3 Answers3

8

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"
Steve Sanders
  • 7,394
  • 2
  • 26
  • 32
3

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.

Thomas Scheffer
  • 409
  • 2
  • 7
2

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

Elias Prado
  • 446
  • 5
  • 14