次の show クラスは、デバイス（画面サイズ）に応じて要素を表示します。
| クラス | 説明 |
|---|---|
| .show-for-small-only | 小型画面にのみ要素を表示する（画面幅が 40.0625em 未満） |
| .show-for-medium-up | 中型以上の画面に要素を表示する (画面幅が 40.0625em 以上) |
| .show-for-medium-only | 中型画面にのみ要素を表示する (画面幅が 40.0625em ～ 64.0625em) |
| .show-for-large-up | 大型以上の画面に要素を表示する (画面幅が 64.0625em 以上) |
| .show-for-large-only | 大型画面にのみ要素を表示する (画面幅が 64.0625em ～ 90.0625em) |
| .show-for-xlarge-up | xlarge 以上の画面に要素を表示する (画面幅が wider than 90.0625em 以上) |
| .show-for-xlarge-only | xlarge 画面にのみ要素を表示する (画面幅が 90.0625em ～ 120.0625em) |
| .show-for-xxlarge-up | xxlarge 以上の画面に要素を表示する (画面幅が 120.0625em 以上) |
全ての .show- visibility クラスの例です。効果を確認するために、
ブラウザウィンドウのサイズを変更してください：
<p class="show-for-small-only">I am shown only on a small
screen.</p>
<p class="show-for-medium-up">I am shown on
medium screens and up.</p>
<p
class="show-for-medium-only">I am shown only on a medium
screen.</p>
<p class="show-for-large-up">I am shown on
large screens and up.</p>
<p
class="show-for-large-only">I am shown only on a large
screen.</p>
<p class="show-for-xlarge-up">I am shown on xlarge screens and up.</p>
<p class="show-for-xlarge-only">I
am shown only on an xlarge screen.</p>
<p class="show-for-xxlarge-up">I
am shown on xxlarge screens and up.</p>
結果：
I am shown only on a small screen.
I am shown on medium screens and up.
I am shown only on a medium screen.
I am shown on large screens and up.
I am shown only on a large screen.
I am shown on xlarge screens and up.
I am shown only on an xlarge screen.
I am shown on xxlarge screens and up.
Try it Yourself »
次の hide クラスは、デバイス（画面サイズ）に応じて要素を非表示にします。
| クラス | 説明 |
|---|---|
| .hide-for-small-only | 小型画面でのみ要素を非表示にする（画面幅が 40.0625em 未満） |
| .hide-for-medium-up | 中型以上の画面で要素を非表示にする (画面幅が 40.0625em 以上) |
| .hide-for-medium-only | 中型画面でのみ要素を非表示にする (画面幅が 40.0625em ～ 64.0625em) |
| .hide-for-large-up | 大型以上の画面で要素を非表示にする (画面幅が 64.0625em 以上) |
| .hide-for-large-only | 大型画面でのみ要素を非表示にする (画面幅が 64.0625em ～ 90.0625em) |
| .hide-for-xlarge-up | xlarge 以上の画面で要素を非表示にする (画面幅が 90.0625em 以上) |
| .hide-for-xlarge-only | xlarge 画面でのみ要素を非表示にする (画面幅が 90.0625em ～ 120.0625em) |
| .hide-for-xxlarge-up | xxlarge 以上の画面で要素を非表示にする (画面幅が 120.0625em 以上) |
全ての .hide- visibility クラスの例です。効果を確認するために、
ブラウザウィンドウのサイズを変更してください：
<p class="hide-for-small-only">You are <em>not</em> on a small
screen.</p>
<p class="hide-for-medium-up">You are <em>not</em> on a
medium, large, xlarge, or xxlarge screen.</p>
<p
class="hide-for-medium-only">You are <em>not</em> on a medium
screen.</p>
<p class="hide-for-large-up">You are <em>not</em> on a
large, xlarge, or xxlarge screen.</p>
<p
class="hide-for-large-only">You are <em>not</em> on a large screen.</p>
<p class="hide-for-xlarge-up">You are <em>not</em> on an xlarge screen
and up.</p>
<p class="hide-for-xlarge-only">You are <em>not</em> on
an xlarge screen.</p>
<p class="hide-for-xxlarge-up">You are <em>not</em>
on an xxlarge screen.</p>
結果：
Try it Yourself »
要素を非表示にするか、または異なる向きに表示するかどうかを決定することができます。 携帯電話とタブレットは縦向き（垂直方向）が多い一方で、ラップトップとデスクトップは殆んどが横向き（水平方向）です。 しかし、携帯電話やタブレットはデバイスを回転させると、それは横向きに変わります。
| クラス | 説明 |
|---|---|
| .show-for-landscape | 横向きの場合は要素を表示する (縦向きの場合は非表示) |
| .show-for-portrait | 縦向きの場合は要素を表示する (横向きの場合は非表示) |
下のテキストは、使用している向きを示しています：
<p class="show-for-landscape">This text is only shown in landscape
orientation.</p>
<p class="show-for-portrait">This text is only shown
in portrait orientation.</p>
結果：
This text is only shown in landscape orientation.
This text is only shown in portrait orientation.
Try it Yourself »
また、ユーザのデバイスがタッチをサポートしているどうかに応じて、要素を表示したり、非表示にしたりすることもできます。
| クラス | 説明 |
|---|---|
| .show-for-touch | タッチデバイスでは要素を表示する（非タッチデバイスでは非表示） |
| .hide-for-touch | タッチデバイスでは要素を非表示にする（非タッチデバイスでは表示） |
下のテキストは、タッチデバイスを使用しているかどうかを示しています：
<p class="show-for-touch">Your device supports touch.</p>
<p
class="hide-for-touch">Your device does not support touch.</p>
結果：
Your device supports touch.
Try it Yourself »