CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
NathonJones
NathonJones

Reputation: 929

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

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

Upvotes: 14

Views: 46628

Answers (1)

morganjlopes
morganjlopes

Reputation: 935

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>

Upvotes: 31

Related Questions