Hiding elements in responsive layout?

Question

Looking through bootstrap it looks like they support collapsing the menubar items for smaller screens. Is there something similar for other items on the page?

For example, I have a along with nav-pills floated right. On a small screen this causes issues. I'd love to at least put it into a similar click-to-show-more dropdown.

Is this possible within existing Bootstrap framework?

Answer 1

New visible classes added to Bootstrap

Extra small devices Phones (<768px) (Class names : .visible-xs-block, hidden-xs)

Small devices Tablets (≥768px) (Class names : .visible-sm-block, hidden-sm)

Medium devices Desktops (≥992px) (Class names : .visible-md-block, hidden-md)

Large devices Desktops (≥1200px) (Class names : .visible-lg-block, hidden-lg)

For more information : http://getbootstrap.com/css/#responsive-utilities

---

Below is deprecated as of v3.2.0

---

Extra small devices Phones (<768px) (Class names : .visible-xs, hidden-xs)

Small devices Tablets (≥768px) (Class names : .visible-sm, hidden-sm)

Medium devices Desktops (≥992px) (Class names : .visible-md, hidden-md)

Large devices Desktops (≥1200px) (Class names : .visible-lg, hidden-lg)

---

Much older Bootstrap

---

.hidden-phone, .hidden-tablet etc. are unsupported/obsolete.

UPDATE:

In Bootstrap 4 there are 2 types of classes:

• The hidden-*-up which hide the element when the viewport is at the given breakpoint or wider.
• hidden-*-down which hide the element when the viewport is at the given breakpoint or smaller.

Also, the new xl viewport is added for devices that are more then 1200px width. For more information click here.