How to hide something in mobile / tablet view in Bootstrap 3?

Question

I have a button in my carousel slider that I would like to display on the desktop, but hidden for mobile / tablets: http://www.doorsets.org.uk/index.php

Is this possible in Bootstrap 3? I know that I can obviously change columns depending on devices, but I don’t understand how to hide / show sections depending on a device.

Would appreciate any advice that might be offered. Also, is there a good Bootstrap 3 forum that you would recommend?

Great value NJ

Answer 1

Here is the documentation that I believe you are looking for:

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

---

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

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

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

And vice versa, if you only want to show something on the 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>