Hide field in HTML with Bootstrap

Asked

Viewed 13,196 times

6

How can I make a text field in my HTML is hidden when the user is viewing by mobile and appears when he is viewing by PC?

  • In this case Voce will have to sweat javascript to change the class of the element.

1 answer

14

Use the Bootstrap responsiveness classes

http://getbootstrap.com/css/#Responsive-Utilities-classes

In your case, use the classes hidden-xs to hide something in mobile resolution and visible-xs to show only in mobile resolution.

<div class="hidden-xs">
    Elemento oculto para mobile
</div>
<div class="visible-xs">
    Elemento visível para mobile e oculto nas demais resoluções
</div>

Setting resolutions in Twiter Bootstrap

  • lg - Large devices (desktops, >= 1200px)
  • md - Medium devices (desktops, >= 992px && < 1200px)
  • sm - Small devices (tablets, >= 768px && < 992px)
  • xs - Extra small devices (smartphones, < 768px)

You can combine prefixes hidden- or visible- with any of the above resolution tags.

  • Pedro, in this case I have to define the resolution that it should hide or there are some mechanism that identifies the resolution as being a cell phone?

  • @Klebernunes changed the answer explaining each tag.

  • Man, if it wasn’t for the frameworks, doing something like this would be really boring

  • I think so too but thanks to the frameworks I ended up learning more and becoming independent of them for these kinds of things.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.