Skip to main content

Bootstrap4で幅によって表示要素を変更するレスポンシブ対応


スマホのときは非表示
パソコンのときは表示
そんな感じで要素をレスポンシブに切り替えたい時があると思う

これをBootstrap4を使ってやってみる


・ブロック表示
mdやsmをつけるとそれ以上の大きさのときだけ対応される

d-md-block

 

・非表示にする

d-none

 

・タブレット以上は表示・小さい時は非表示

d-none d-md-block

 

これで、レスポンシブに要素を表示・非表示できるようになりましたとさ
参考
https://cccabinet.jpn.org/bootstrap4/utilities/display

関連記事:

Pocket