-1

I have the following code in a view:

<button type="button" tabindex="500" title="Abort ongoing upload" class="btn btn-secondary hidden-xs-up">
    <i class="fa fa-ban"></i>  
    <span class="hidden-xs-up">Cancel</span>
</button>

I am using Bootstrap v4, whose documentation mentions that 'hidden-xs-up' (which has replaced the erstwhile 'hidden-xs') will hide the particular element from devices which are 'xs' & upwards. Sadly, this doesn't seem to happen in my case and the button appears. Infact, there are some other elements too with the class, but they appear too.

In the Chrome debugger window, there are no styles associated with the class. Why is this happening and what is the solution to it?

aceBox
  • 711
  • 2
  • 13
  • 30

3 Answers3

2

In Bootsrap 4 Beta, visible-** and hidden-** have been replaced with d-none, d-block, d-inline, & d-flex. Refer to this for a full list of the equivalent of visible-** and hidden-** in Bootstrap 4 Beta.

Sheedo
  • 524
  • 5
  • 13
1

Support for it was dropped in v4.0.0-beta:

See https://github.com/twbs/bootstrap/pull/22113

Drops .hidden-*-up. This is the same as our responsive display: none utility. Instead of .hidden-xs-up or .hidden-md-up, use .d-none and .d-md-none.

user125661
  • 1,558
  • 12
  • 28
  • I am using the Rails gem for Bootstrap: https://github.com/twbs/bootstrap-rubygem; I think it must not be present there, not sure why though (its a v4.0.0.beta) – aceBox Sep 19 '17 at 22:56
  • That gem uses v4.0.0-beta, in which version it was dropped. I have updated the answer with this information. – user125661 Sep 19 '17 at 23:14
1

On this page for Version 4

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

it says:

Removed from v4 alphas: .hidden-xs-up ....

They also add:

Instead, try toggling the [hidden] attribute or use inline styles like style="display: none;" and style="display: block;".

Johannes
  • 64,305
  • 18
  • 73
  • 130