Web制作

【Bootstrap4】レスポンシブ表示・非表示の切り替え方法まとめ【Display property】

Written by o-saka

 

Bootstrap4のグリッドシステムでレスポンシブサイトを作成したときの、横幅によって表示したり非表示にしたりする切り替え方法が分かり難かったので使用頻度が高いものをまとめてみました。レイアウトの参考になれば幸いです。

表示・非表示切り替え方法一覧

下記はblock要素に関して記述しています。必要に応じて変更してください。

xs(横幅576px)で【A】、それ以上は【B】を表示

 
 
 
 
 

ソース

<div class="d-block d-sm-none">【A】</div>
<div class="d-none d-sm-block">【B】</div>

表示

 A 
 B 

sm(横幅768px)で【A】、それ以上は【B】を表示

 
 
 
 
 

ソース

<div class="d-block d-md-none">【A】</div>
<div class="d-none d-md-block">【B】</div>

表示

 A 
 B 

md(横幅992px)で【A】、それ以上は【B】を表示

 
 
 
 
 

ソース

<div class="d-block d-lg-none">【A】</div>
<div class="d-none d-lg-block">【B】</div>

表示

 A 
 B 

lg(横幅1200px)で【A】、それ以上は【B】を表示

 
 
 
 
 

ソース

<div class="d-block d-xl-none">【A】</div>
<div class="d-none d-xl-block">【B】</div>

表示

 A 
 B 

sm(横幅576px以上~768px未満)のみ【A】、それ以外は【B】を表示

 
 
 
 
 

ソース

<div class="d-none d-sm-block d-md-none">【A】</div>
<div class="d-sm-none d-md-block">【B】</div>

表示

 A 
 B 

md(横幅768px以上~992px未満)のみ【A】、それ以外は【B】を表示

 
 
 
 
 

ソース

<div class="d-none d-md-block d-lg-none">【A】</div>
<div class="d-md-none d-lg-block">【B】</div>

表示

 A 
 B 

lg(横幅992px以上~1200px未満)のみ【A】、それ以外は【B】を表示

 
 
 
 
 

ソース

<div class="d-none d-lg-block d-xl-none">【A】</div>
<div class="d-lg-none d-xl-block">【B】</div>

表示

 A 
 B 

上記7パターンさえ押さえておけばほとんどのレイアウトで問題ないかと思いますがいかがでしょうか。
より細かい設定も可能ですので下記参考サイトをご参照ください。

[amazonjs asin=”4297100207″ locale=”JP” title=”Bootstrap 4 フロントエンド開発の教科書”]

この記事を書いた人

o-saka(@abiko41)

フリーランスでWEB作ったりロゴ作ったりしてます。
お仕事のご依頼等は下記フォームより承っております 。お気軽にお問い合わせください。

お問い合わせ