【Bootstrapの基本要素】ディスプレイユーティリティ（Display）に関して

記事内に商品プロモーションを含む場合があります

Bootstrapのディスプレイユーティリティに関して、解説していきます。

ディスプレイユーティリティって何のことかというと、ブロックタイプ要素やインライン要素を決めるものです。

一言、ブロックタイプ要素やインライン要素と言っても、display: tableもあればdisplay: flexなどの要素もあります。さらに言うと、どのブレイクポイントでそれを実行するのかsmやmd、lgといった指定もあるので、指定方法は様々です。

今回はBootstrapのディスプレイユーティリティに関して、お伝えしていきます。

Contents

ディスプレイユーティリティ（Display）の書き方と種類

まず、Bootstrapにおける、ディスプレイユーティリティの書き方は次の通りです。

d-{value}

d-{breakpoint}-{value}

※valueにはそれぞれの要素、breakpointはsm、md、lg、xlのいづれかが入ります

では、要素の種類についてもふれていきます。

Displayの種類は以下のものがあります。

では、実際にコードと実機画面で確認していきましょう。

ここでは、使用頻度の高い以下のクラスを使用していきます。

d-inline

d-block

d-md-none

3つ目のmdは、ブレイクポイント768px以上になった場合、非表示になるというものです。

では、確かめてみましょう。

まず、d-inlineです。
これはブロックタイプ要素をインライン要素にするクラスですね。

d-inline

ブロックタイプ要素→インライン要素に

ご覧の通り、div（ブロック要素）であるにも関わらず、インライン要素になっていることが確認できます。

次に、d-blockです。
こちらは前回と対照的で、インライン要素をブロックタイプ要素に変えるクラスです。

d-block

インライン要素→ブロックタイプ要素に

こちらも、span（インライン要素）が、ブロックタイプ要素になっていることが確認できますね。

最後は非表示にするクラスです。

これは冒頭でもお伝えしたように、ブレイクポイントmd、つまり768px以上になると非表示になるよという意味を持つクラスになります。

d-md-none

width 767pxの場合

width 768pxの場合

こちらは、768px以上になると要素が消えていますね。

また、今回の例ではmdと指定していますが、これがlgやsmの場合でもブレイクポイントが変わるだけで（それぞれ992px、576px）対応可能となっています。

Bootstrapのディスプレイユーティリティ（Display）について解説しました。

もう一度おさらいしますね。

使用できるクラスはこちらです。