d-xxl- の設定はBootstrap 5 のみ利用可能です。
Bootstrapでウィンドウ幅に応じて要素を非表示にする方法を紹介します。
Bootstrapでウィンドウ幅の広さによって要素を非表示にする場合は要素のクラスに d-(サイズ)-none を設定します。
ウィンドウ幅があらかじめ決められている幅より広くなった場合に要素を非表示にするコードです。
このコードは、決められた幅よりウィンドウ幅が狭くなった場合に要素を表示する動作でもあります。
クラスに以下の記述を追加します。
d-none
d-sm-none
d-md-none
d-lg-none
d-xl-none
d-xxl-none
| d-none | 常に非表示 |
| d-sm-none | ウィンドウ幅が小(576ピクセル)以上で非表示 |
| d-md-none | ウィンドウ幅が中(768ピクセル)以上で非表示 |
| d-lg-none | ウィンドウ幅が大(992ピクセル)以上で非表示 |
| d-xl-none | ウィンドウ幅が特大(1200ピクセル)以上で非表示 |
| d-xxl-none | ウィンドウ幅が特大(1400ピクセル)以上で非表示 |
.frame1 {
border: solid 1px #31983f;
}
.frame2 {
border: solid 1px #ff6a00;
}
.frame3 {
border: solid 1px #530094;
}
.frame4 {
border: solid 1px #0278bd;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="Content/bootstrap.css" />
<script src="Scripts/jquery.js"></script>
<script src="Scripts/bootstrap.js"></script>
<link rel="stylesheet" href="SimpleHidden.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 frame1">
枠1です。<br />
ABCDEFG
</div>
<div class="col-md-3 frame2">
枠2です。<br />
ABCDEFG
</div>
<div class="col-md-3 d-lg-none frame3">
枠3です。<br />
ABCDEFG
</div>
<div class="col-md-3 frame4">
枠4です。<br />
ABCDEFG
</div>
</div>
</div>
</body>
</html>
col-の動作についてはこちらの記事を参照してください。
d-lg-none が設定されている「枠3」はウィンドウ幅が992ピクセル以上になると非表示になります。
上記のHTMLファイルを実行します。下図のページが表示されます。ウィンドウ幅が992ピクセル以上のためd-lg-noneを指定した"枠3"は非表示になることが確認できます。
ウィンドウの幅を狭めます。ウィンドウ幅が992ピクセル以下になると。"枠3"が表示されます。
さらにウィンドウ幅が狭まると段組みが解除されますが、"枠3"は表示されたままです。
決められた幅よりウィンドウ幅が狭くなった場合に要素を非表示にする場合は、先に紹介した、d-none と
ウィンドウ幅に応じて要素を表示する d-sm-block d-md-block d-lg-block d-xl-blockを組み合わせると実現できます。
.frame1 {
border: solid 1px #31983f;
}
.frame2 {
border: solid 1px #ff6a00;
}
.frame3 {
border: solid 1px #530094;
}
.frame4 {
border: solid 1px #0278bd;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="Content/bootstrap.css" />
<script src="Scripts/jquery.js"></script>
<script src="Scripts/bootstrap.js"></script>
<link rel="stylesheet" href="SimpleHidden.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 frame1">
枠1です。<br />
ABCDEFG
</div>
<div class="col-md-3 frame2">
枠2です。<br />
ABCDEFG
</div>
<div class="col-md-3 d-none d-lg-block frame3">
枠3です。<br />
ABCDEFG
</div>
<div class="col-md-3 frame4">
枠4です。<br />
ABCDEFG
</div>
</div>
</div>
</body>
</html>
d-noneが設定されている「枠3」はデフォルトで非表示になります。
d-lg-block が設定されているため、「枠3」はウィンドウ幅が992ピクセル以上になると枠が表示されます。
上記のHTMLページをWebブラウザで表示します。下図のページが表示されます。ウィンドウ幅が992ピクセル以上のため、[枠3] は表示されています。
ウィンドウ幅を狭めます。ウィンドウ幅が992ピクセル以下(lgの幅)になると、[枠3]が非表示になります。
さらにウィンドウ幅を狭めてウィンドウ幅が768ピクセル以下(mdの幅)になると、段組みが解除され縦に並んで表示されます。
