画面サイズに応じて要素を表示・非表示にする書式：Bootstrap3コードまとめ

Bootstrapのコードを少しずつまとめていきます。
今回は、画面サイズに応じて要素を表示・非表示にする書式です。

特定の要素をPCからの閲覧時は表示しておいて、スマホでは非表示にしたり、その逆のパターンなどいろいろと応用できます。

例として、PCからの閲覧時にはスライドショーを表示させ、スマホでは非表示にする、などです。

特定の要素を画面サイズに応じて表示する

要素を表示するクラス

画面幅	～ 767px	768 ～ 991px	992 ～ 1199px	1200px ～
visible-xs	表示	非表示	非表示	非表示
visible-sm	非表示	表示	非表示	非表示
visible-md	非表示	非表示	表示	非表示
visible-lg	非表示	非表示	非表示	表示

• クラス「visible-xs」を適用すると画面幅767px以下で表示
• クラス「visible-sm」を適用すると画面幅768～991pxで表示
• クラス「visible-md」を適用すると画面幅992～1199pxで表示
• クラス「visible-lg」を適用すると画面幅1200px以上で表示

特定の要素を画面サイズに応じて非表示にする

要素を非表示にするクラス

画面幅	～ 767px	768 ～ 991px	992 ～ 1199px	1200px ～
hidden-xs	非表示	表示	表示	表示
hidden-sm	表示	非表示	表示	表示
hidden-md	表示	表示	非表示	表示
hidden-lg	表示	表示	表示	非表示

• クラス「hidden-xs」を適用すると画面幅767px以下で非表示
• クラス「hidden-sm」を適用すると画面幅768～991pxで非表示
• クラス「hidden-md」を適用すると画面幅992～1199pxで非表示
• クラス「hidden-lg」を適用すると画面幅1200px以上で非表示