CODEWITHSUNDEEP
twitter-bootstrap
Jaypee
Jaypee

Reputation: 1280

Bootstrap 3.1 visible-xs and visible-sm not working together

I have a div that I want to show on sm and xs devices, it looks like this:

<div class="col-xs-4 col-sm-4 visible-xs visible-sm">
   <a href="#">Item 1</a>
   <a href="#">Item 2</a>
   <a href="#">Item 3</a>
</div>

My bootstrap is loading from cdn without any customization.

This is supposed to show this div on xs and sm as stated on classes but the result is the sm class display:none !important is overriding the xs display:block !important when you go to xs size on the browser.

I tried to find out on bootstrap documentation but they only have a table that is not explaining how to use multiple visibility parameters on the same div.

Upvotes: 37

Views: 102479

Answers (4)

Thomas Scheffer
Thomas Scheffer

Reputation: 554

Bootstraps works with classes that go from the specified width-class and up. For example if you put col-sm-4, this simply forces it to be 4 columns wide for the sm-width and wider.

In your case a simple class="col-xs-4 hidden-md hidden-lg" should be enough to get your desired solution.

The reason your first solution didn't work, is that you specified visible-xs before visible-sm. Which forces the sm class onto it, making it invisible on the xs-width. As this is specified in the stock bootstrap css.

Edit: For those who are using Bootstrap 4 this could be achieved with just class="col-4 d-md-none"

Upvotes: 2

Razvan Nicu
Razvan Nicu

Reputation: 116

You must add one value from:

`.visible-*-block` for `display: block;`
`.visible-*-inline` for `display: inline;`
`.visible-*-inline-block` for `display: inline-block;`

In this case you will have something like this:

<div class="col-xs-4 col-sm-4 visible-xs-block visible-sm-block">

Keep up the good work :)

Upvotes: 3

Juri Robl
Juri Robl

Reputation: 5746

If you want to show it at multiple sizes, don't use visible-* but instead hide the other sizes you don't want with hidden-*. In this case: hidden-md hidden-lg

Upvotes: 92

Zafar
Zafar

Reputation: 3434

When I face issues like this, I would simply prefer to use my own custom media query to manipulate the visibility of an element.

.someclass{
    display: none;
}

@media (max-width: 992px) {
   .someclass{
      display: normal!important;
   }
}

Or if you want to re-use this, then define a custom class such as:

.visible-tablet-mobile{
    display: none;
}

@media (max-width: 992px) {
   .visible-tablet-mobile{
        display: normal!important;
   }
}

and re-use it instead of giving your div two visibility classes at a time.

Upvotes: 3

Related Questions