twitter-bootstrap - bootstrap collapsed block with responsive.css

Question

This tutor shows example of navigations menu. If browser resolution allows, all items showed. If I look at page from mobile, nav bar collapsed. How can I do this with another block of content?

Answer 1

There are several different ways to achieve this with Bootstrap. One way is to use the responsive utility classes: http://twitter.github.io/bootstrap/scaffolding.html#responsive

You could also use the Bootstrap media queries to control the display of elements..

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }