Twitter Bootstrap responsive utility class usage

twitter-bootstrap

Solution

Just in case someone wants to do this with Bootstrap 3.0. Hey have changed these classes:

`.visible-phone` became `.visible-sm`

`.visible-tablet` became `.visible-md`

`.visible-desktop` became `.visible-lg`

`.hidden-phone` became `.hidden-sm`

`.hidden-tablet` became `.hidden-md`

`.hidden-desktop` became `.hidden-lg`

Usage:

<span class='hidden-sm hidden-md visible-lg'>

The Bootstrap 3.0 migration guide can be found here.

Problem

How are the Twitter Bootstrap responsive utility classes such as .visible-desktop supposed to be used. I have tried to follow the example on the Bootstrap web site, ``` <span class="visible-desktop">✔ Desktop</span> ``` on an image like this, ``` <span class="visible-desktop"> <img src="<%=(image_path('green.jpg'))%>"></img> </span> ``` but the image remains when I shrink the browser window to tablet or phone size.

Original source