Bootstrap 表示/非表示


設定値

Extra small devices
スマートフォン (<768px)
Small devices
タブレット (≥768px)
Medium devices
デスクトップPC (≥992px)
Large devices
デスクトップPC (≥1200px)
.visible-xs-* Visible
.visible-sm-* Visible
.visible-md-* Visible
.visible-lg-* Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible
ノーマル表示(Bootstrap利用無し)

 

<div class=”mydiv”> </div>

スマホ時のみ表示

visible-xs-block
visible-xs-inline
visible-xs-inline-block

※↑画面サイズによってはココに<div>が表示される。
<div class="visible-xs-block">visible-xs-block</div>
<div class="visible-xs-inline">visible-xs-inline</div>
<div class="visible-xs-inline-block">visible-xs-inline-block</div>

スマホ時のみ非表示

※↑画面サイズによってはココに<div>が表示される。
<div class="hidden-xs">hidden-xs</div>