CODEWITHSUNDEEP
csstwitter-bootstrap
Mont
Mont

Reputation: 23

Bootstrap hide not work properly

I have a following code :

<div class="row">
        <div class="hidden-xs">
            <h1>Hello</h1>
        </div>
    </div>

and I expect it to be invisible when width will be smaller than 480px as it's default value in bootstrap css files. However, using Google Chrome simulator it becomes invisible when I set width smaller than 768 - so it works like hidden-sm. When I change hidden-xs to hidden-xs-down it always stays visible.

What I do wrong ?

Upvotes: 2

Views: 255

Answers (1)

Pepelius
Pepelius

Reputation: 1609

First of all you should double or triple check that your page loads jQuery before anything else. After that should follow the Bootstrap's JS and CSS libraries.

Bootstrap's default class hidden-xs should work just fine if the framework is able to load correctly, no changes to any CSS or JS required at any point. I would also like to mention that hidden-xs-down is not Bootstrap standard, and that explains why it does not work.

What comes to the default breakpoints, 768px is actually XS, while 992px is SM and so forth.

In case you want the div to disappear when the width is below 480px, you should create your own class. To do so, just put the following to your CSS:

@media (max-width: 480px)
{
   .hidden-xxs { display: none; }
}

Upvotes: 2

Related Questions