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?

html html5 twitter-bootstrap bootstrap-3 responsive-layout

  • 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 html html5 twitter-bootstrap bootstrap-3 responsive-layout

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