'visible-xs-block not working

i'm creating a site with bootstrap, and i want some div to show only in extra small devices, i'm using the visible-xs-block class im my div, but don't work.

Some one now why not work?

this is my code:

<div class="search-block-wrapper visible-xs-block">
     <div class="search-block">
        <input type="text" class="search-block-input form-control" placeholder="Search..."/>
     </div>
</div>

But, this div still showing in large widths.

And, if i use hidden-sm, hidden-md, and hidden-lg instead use visible-xs-block, everything works.

csstwitter-bootstrapmedia-queries


Solution 1:[1]

Why don't work? All work. Check it! Try change size window! http://jsfiddle.net/9EQeg/166/

<div class="search-block-wrapper visible-xs-block">
    <div class="search-block">
        <input type="text" class="search-block-input form-control" placeholder="Search..."/>
    </div>
</div>

If you won't use this solution, use hidden-sm hidden-md hidden-lg

xs - Extra small devices Phones (<768px)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions