[Bootstrap] 表示/非表示の制御 Display property

Bootstrapでサイトを作る際、ブレークポイントで表示/非表示を分ける事も出来ますが、プロパティーを記述する事で表示/非表示を分ける事も出来ます。

使い方はいたって簡単！クラスに追加するだけです。class=”d-sm-none”　的な感じで。

	sm ?576px	md ?768px	lg ?992px	xl ?1200px
横幅の最大	540px	720px	960px	1140px

Screen Size	Class
全サイズ非表示	.d-none
xsだけ非表示	.d-none .d-sm-block
smだけ非表示	.d-sm-none .d-md-block
mdだけ非表示	.d-md-none .d-lg-block
lgだけ非表示	.d-lg-none .d-xl-block
xlだけ非表示	.d-xl-none
全サイズ表示	.d-block
xsだけ表示	.d-block .d-sm-none
smだけ表示	.d-none .d-sm-block .d-md-none
mdだけ表示	.d-none .d-md-block .d-lg-none
lgだけ表示	.d-none .d-lg-block .d-xl-none
xlだけ表示	.d-none .d-xl-block

例えば、class=”d-lg-none ”とした場合、「lgサイズ」と「xl」では非表示となります。