【Bootstrap4】レスポンシブ表示・非表示の切り替え方法まとめ【Display property】
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パターンさえ押さえておけばほとんどのレイアウトで問題ないかと思いますがいかがでしょうか。
より細かい設定も可能ですので下記参考サイトをご参照ください。
- 【Bootstrap4】横並びボタングループをレスポンシブ対応させて縦並びに切り替える方法
- Bootstrapで良く使うけど忘れがちなCSSスタイルまとめ
- Bootstrapをカスタマイズして軽量化する方法
[amazonjs asin=”4297100207″ locale=”JP” title=”Bootstrap 4 フロントエンド開発の教科書”]
