Twitter Bootstrap responsive utility class usage

Question

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.

Answer 1

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.