Bootstrap 3 hidden-* doesn't work on intermediate window sizes

user_7333091 0
Viewed 46

Bootstrap 3 classes hidden-* seems doesn't work properly on some window sizes. I suppose that this code must hide text forever:

<!doctype html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<body>
  <div class="hidden-xs hidden-sm hidden-md hidden-lg">hidden</div>
</body>
</html>

But on some window width (in very narrow intervals) it's shown. Checked in Chrome, Firefox, Edge. Firefox extension "Bootstrap - Responsible Helper" show always "LG" when text is visible.

Screenshot from Chrome with devtools

Screenshot from Firefox

For reproduction try window size about 767px+- with 100% scale.

What could be the problem?

twitter-bootstrap-3 twitter-bootstrap css html
2 Answers

Tried to reproduce the error in a fiddle, but it works fine. JSFiddle

Also, if you want to hide something on all sizes, you can use hidden instead of hidden-xs hidden-sm hidden-md hidden-lg.

Or if you want to, let's say make it visible at lg, use: hidden visible-lg. No need for redundant classes for all breakpoints.

user_95860730

Try to use this table

Also I guess that the problem is in your browser cache or in something else, because if I run the snippet the behaviour is correct

enter image description here

user_166509910
Related