Bootstrapでウィンドウ幅に応じて要素を表示する

Bootstrapでウィンドウ幅に応じて要素を表示する方法を紹介します。

概要

Bootstrapでウィンドウ幅の広さによって要素を表示する場合は要素のクラスに d-(サイズ)-(表示モード) を設定します。

決められた幅よりウィンドウ幅が広くなると要素を表示する

ウィンドウ幅があらかじめ決められている幅より広くなった場合に要素を表示にするコードです。このコードは、決められた幅よりウィンドウ幅が狭くなった場合に要素を非表示にする動作でもあります。

書式

d-(表示モード)

d-sm-(表示モード)

d-md-(表示モード)

d-lg-(表示モード)

d-xl-(表示モード)

d-xxl-(表示モード)

表示モードには以下の値を指定できます。

inline	インライン要素として表示します
block	ブロック要素として表示します
inline-block	インライン・ブロック要素として表示します
grid	グリッド要素として表示します
table	テーブル要素として表示します
table-row	テーブルの行要素として表示します
table-cell	テーブルのセル要素として表示します
flex	Flexコンテナの要素として表示します
inline-flex	インラインのFlexコンテナの要素として表示します
none	非表示にします

補足

none の表示モードについてはこちらの記事を参照してください。

書式例 : ブロック要素として表示する場合

要素をブロック要素として表示する場合、クラスに以下の記述を追加します。

d-block

d-sm-block

d-md-block

d-lg-block

d-xl-block

d-xxl-block

書式例:インライン要素として表示する場合

要素をインライン要素として表示する場合、クラスに以下の記述を追加します。

d-inline

d-sm-inline

d-md-inline

d-lg-inline

d-xl-inline

d-xxl-inline

動作

d-(表示モード)	常に非表示
d-sm-(表示モード)	ウィンドウ幅が小(576ピクセル)以上で指定したの表示モードに設定
d-md-(表示モード)	ウィンドウ幅が中(768ピクセル)以上で指定したの表示モードに設定
d-lg-(表示モード)	ウィンドウ幅が大(992ピクセル)以上で指定したの表示モードに設定
d-xl-(表示モード)	ウィンドウ幅が特大(1200ピクセル)以上で指定したの表示モードに設定
d-xxl-(表示モード)	ウィンドウ幅が特大(1400ピクセル)以上で指定したの表示モードに設定

補足

d-xxl- の設定はBootstrap 5 のみ利用可能です。

実装例

下記のHTML,CSSファイルを作成します。 Bootstrapは/css フォルダと /js フォルダ内にファイルを配置します。

コード

[||show-element-01.cssl]

.frame1 {
  border: solid 1px #31983f;
}

.frame2 {
  border: solid 1px #ff6a00;
}

.frame3 {
  border: solid 1px #530094;
}

.frame4 {
  border: solid 1px #0278bd;
}

[||show-element-01.htmll]

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="/css/bootstrap.css" />
  <link rel="stylesheet" href="/css/bootstrap-grid.css" />
  <link rel="stylesheet" href="/css/bootstrap-reboot.css" />
  <link rel="stylesheet" href="/css/bootstrap-utilities.css" />
  <script src="/js/bootstrap.js"></script>
  <link rel="stylesheet" href="show-element-01.css" />
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6 col-md-3 d-sm-block frame1">
        枠1です。<br />
        ABCDEFG
      </div>
      <div class="col-md-3 d-none d-md-block frame2">
        枠2です。<br />
        ABCDEFG
      </div>
      <div class="col-lg-3 d-none d-lg-block frame3">
        枠3です。<br />
        ABCDEFG
      </div>
      <div class="col-sm-6 col-lg-3 d-sm-block frame4">
        枠4です。<br />
        ABCDEFG
      </div>
    </div>
  </div>
</body>
</html>

解説

container-fluid クラスを指定して、枠1, 枠2, 枠3, 枠4 を横方向に段組みして表示します。
枠2, 枠3 は d-none クラスを指定しており、デフォルトでは非表示になっています。
枠2は d-md-block を指定しており、ウィンドウ幅が768ピクセル以上になると画面に表示する動作になります。枠3は d-lg-block を指定しており、ウィンドウ幅が992ピクセル以上になると画面に表示する動作になります。