デバイス表示・非表示を指定方法

- Point -

表示・非表示を指定を設定したいクラスのクラス名の後ろを追加します
例：<div class="other-class hidden">...</div>
クラスother-classを非表示にします

基本
xs モバイル (768px以下)
sm タブレット (768px以上、992px未満)
md デスクトップ (992px以上、1200px未満)
lg デスクトップ (1200px以上)
共通オプション
クラス名 解説
visible-xs モバイル (768px以下)だけで表示します
visible-sm タブレット (768px以上、992px未満)だけで表示します
visible-md デスクトップ (992px以上、1200px未満)だけで表示します
visible-lg デスクトップ (1200px以上)だけで表示します
hidden-xs
モバイル (768px以下)だけで非表示します
hidden-sm
タブレット (768px以上、992px未満)だけで非表示します​​​​​​​
hidden-md
デスクトップ (992px以上、1200px未満)だけで非表示します​​​​​​​
hidden-lg
デスクトップ (1200px以上)だけで非表示します​​​​​​​
複数画面サイズの指定例
クラス 画面サイズ 状態
class="visible-xs visible-sm" モバイル (768px以下)とタブレット (768px以上、992px未満) 表示
class="visible-sm visible-md" タブレット (768px以上、992px未満)とデスクトップ (992px以上、1200px未満) 表示
class="visible-md visible-lg" デスクトップ (992px以上、1200px未満)とデスクトップ (1200px以上) 表示
class="hidden-xs hidden-sm" モバイル (768px以下)とタブレット (768px以上、992px未満) 非表示
class="hidden-sm hidden-md"
タブレット (768px以上、992px未満)とデスクトップ (992px以上、1200px未満) 非表示
class="hidden-md hidden-lg"
デスクトップ (992px以上、1200px未満)とデスクトップ (1200px以上) 非表示