13

I have a button in my Carousel slider that I would like displayed for desktop but hidden for mobile/tablet devices: http://www.doorsets.org.uk/index.php

Is this possible in Bootstrap 3? I'm aware that i can obviously change columns depending on devices, but I'm not clear on how to hide/display sections depending on the device.

Would appreciate any advice that could be offered. Also, is there a good Bootstrap 3 forum/s that you'd recommend?

Much appreciated NJ

NathonJones
  • 919
  • 4
  • 13
  • 28

1 Answers1

30

Here is the documentation I believe you're looking for:

http://getbootstrap.com/css/#responsive-utilities-classes

You'll want to wrap the content you want to hide/show the desired class.

For example, if you want to hide a section on small(tablet) screens:

<section class="hidden-sm">
    <p>This content won't be visible on a tablet, or screen resolution ≥768p and < 992px</p>
</section>

Conversely, if you only want to show something on a tablet:

<section class="visible-sm">
    <p>This content will only be visible on a tablet, or screen resolution ≥768px and < 992px</p>
</section>

For your button, something like this will only appear on medium and large screens:

<div class="btn btn-primary visible-md visible-lg">Carousel Button</div>
morganjlopes
  • 925
  • 7
  • 10
  • Thank you Morgan. I guess this is probably better done with media queries in the CSS so that portions of the page that you don't want seen aren't loaded anyway, which I assume happens when you use the responsive utilities classes? I couldn't get the hidden-sm to work, but the visible-* worked a treat. Much appreciated. – NathonJones Jan 16 '15 at 13:53
  • @NathonJones, this is done using media queries. Be aware, if you're trying to hide on mobile phone, you'll need to use hidden-xs – morganjlopes Jan 16 '15 at 20:34
  • Note that this is not tablet-and-less specific with `hidden-sm`. So, if you want both tablet and mobile, you'll have to use `hidden-sm hidden-xs` in your class attribute on that element to hide it in both. – Volomike Feb 24 '17 at 20:35