スマートフォン、タブレット、パソコンなどデバイスごとに、画面サイズに合わせて表示するコンテンツを変えたい事があります。
例えば、画面の小さなスマートフォンでは、アイコンで表示し、表示に余裕のあるパソコンではテキストで表示する場合です。
このページでは Bootstrap4 を用いて、画面サイズごとに表示するコンテンツを変えます。
結論
タブレット以上で表示
<div class="d-none d-block-md">
タブレット以上で非表示
<div class="d-block d-none-md">
画面のサイズの指定は、上記のmd（タブレット）の他にsm（横向きスマートフォン）、lg（デスクトップ）、xl（ワイド・デスクトップ）が指定できます。
解説
Bootstrap4 の CSS を HTML ファイルに読み込みます。classにd-noneと書くとその要素は非表示になります。classにd-block、d-inlineと書くと、それぞれブロック要素、インライン要素として表示します。
画面サイズに合わせて表示非表示を切り替えるには、まず小さな画面に対する表示を書きd-none、大きい画面サイズに対してd-block-{size}で上書きします。
d-block-mdとするとmd以上の画面に対して、d-blockが有効になります。
なお、{size}はsm, md, lg, xlがそれぞれ、横向きスマートフォン、タブレット、デスクトップ、ワイド・デスクトップに対応しています。
Bootstrap4 とは
閲覧者の画面サイズに合った最適な表示を設計することをレスポンシブ・デザインと呼びます。Bootstrap4 を利用するとレスポンシブ・デザインに対応したウェブページを簡単に作る事ができます。
(付録) Bootstrap4 の CSS を HTML ファイルに組み込む
Bootstrap4 の CSS を利用するには、HTML ファイルの<head>内に、Bootstrap CDN の配信している CSS ファイルへのリンクを挿入します。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
参考文献
Bootstrap4移行ガイド : Display property
Bootstrap4.1 documentation: Display property