メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

表示ユーティリティ(Display property) v4.0.0設定変更

表示ユーティリティを使用して、コンポーネントの display の値をすばやくレスポンシブに切り替えることが可能。より一般的な値の一部と、印刷時の display を制御するための追加機能を含む。

※v3のレスポンシブ・ユーティリティより変更。

使い方(How it works)

レスポンシブな表示ユーティリティクラスを使用して、displayプロパティの値を変更。Bootstrapでは意図的に表示可能なすべての値のサブセットのみをサポート。クラスは、必要に応じてさまざまなエフェクトが組み合わせ可能。

 

記法について(Notation)v4.0.0クラス名変更、一部追加

xs から xl までのすべてのブレークポイントに適用されるユーティリティークラスを表示するには、その中にブレークポイントの省略形は存在しない。これは、これらのクラスが min-width: 0; から適用されるため。それゆえ、メディアクエリによって束縛されない。ただし、残りのブレークポイントにはブレークポイントの省略形が含まれる。

したがって、クラス名は次の形式で指定:

  • .d-{value} は、xs
  • .d-{breakpoint}-{value} は、sm, md, lg, xl

valueは次のいずれか:

  • none:非表示(display: none;
  • inline:インライン表示(display: inline;
  • inline-block:インライン・ブロック表示(display: inline-block;
  • block:ブロック表示(display: block;
  • table:テーブル表示(display: table;
  • table-row:テーブル行表示(display: table-row;
  • table-cell:テーブルセル表示(display: table-cell;
  • flex:flexコンテナ表示(display: flex;
  • inline-flex:flexインラインコンテナ表示(display: inline-flex;

表示のvalueは、scss/_variables.scss 内の $displays 変数を変更してSCSSを再コンパイルすることで変更可能。【v4.3.0~】

メディアクエリは、指定されたブレークポイント以上で画面の幅を調整。例えば、.d-lg-none は、lg(大)と xl(極大)の両方の画面で display: none; を設定。

 

実例(Examples)

見本 見やすいように色と空白をつけています

●インライン表示 .d-inline

d-inline
d-inline

●ブロック表示 .d-block

d-block d-block

●インライン・ブロック表示 .d-inline-block

d-inline-block

ブロック1

d-inline-block

ブロック2

●テーブル表示 .d-table, .d-table-cell, .d-table-row(v4.0.0-beta.2追加)

d-table

d-table

d-table

d-table

※flexコンテナ表示とflexインラインコンテナ表示の見本は、Flex動作を有効にするに記載。

設定例
インライン表示<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
ブロック表示<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>
インライン・ブロック表示<div class="d-inline-block p-2 bg-primary text-white">
	<h3>d-inline-block</h3>
	ブロック1
</div>
<div class="d-inline-block p-2 bg-dark text-white">
	<h3>d-inline-block</h3>
	ブロック2
</div>
テーブル表示<div class="d-table">
	<div class="d-table-row">
		<p class="d-table-cell p-2 bg-primary text-white">d-table</p>
		<p class="d-table-cell p-2 bg-dark text-white">d-table</p>
	</div>
	<div class="d-table-row">
		<p class="d-table-cell p-2 bg-primary text-white">d-table</p>
		<p class="d-table-cell p-2 bg-dark text-white">d-table</p>
	</div>
</div>

上述した1つのユーティリティごとにもレスポンシブのバリエーションが存在する。

定義済みクラスの種類
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大
≥1200px
非表示 .d-none .d-sm-none .d-md-none .d-lg-none .d-xl-none
インライン表示 .d-inline .d-sm-inline .d-md-inline .d-lg-inline .d-xl-inline
インライン・ブロック表示 .d-inline-block .d-sm-inline-block .d-md-inline-block .d-lg-inline-block .d-xl-inline-block
ブロック表示 .d-block .d-sm-block .d-md-block .d-lg-block .d-xl-block
テーブル表示 .d-table .d-sm-table .d-md-table .d-lg-table .d-xl-table
テーブル行表示 .d-table-row .d-sm-table-row .d-md-table-row .d-lg-table-row .d-xl-table-row
テーブルセル表示 .d-table-cell .d-sm-table-cell .d-md-table-cell .d-lg-table-cell .d-xl-table-cell
flexコンテナ表示 .d-flex .d-sm-flex .d-md-flex .d-lg-flex .d-xl-flex
flexインラインコンテナ表示 .d-inline-flex .d-sm-inline-flex .d-md-inline-flex .d-lg-inline-flex .d-xl-inline-flex

【設定】

  • 非表示(要素自体を隠す):.d(-{breakpoint})-none
  • インライン(横並び)表示:.d(-{breakpoint})-inline
  • インライン・ブロック(横並びで幅や高さも持たせる)表示:.d(-{breakpoint})-inline-block
  • ブロック(縦積み)表示:.d(-{breakpoint})-block
  • テーブル表示(<table> のような表示):.d(-{breakpoint})-table
  • テーブル行表示(<tr> のような表示):.d(-{breakpoint})-table-row
  • テーブルセル表示(<td> のような表示):.d(-{breakpoint})-table-cell
  • flexコンテナ表示(Flexboxレイアウトによる表示):.d(-{breakpoint})-flex
  • flexインラインコンテナ表示(Flexboxレイアウトによる表示):.d(-{breakpoint})-inline-flex
    • {breakpoint}sm(小), md(中), lg(大), xl(特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる

【Bootstrap3.xとの変更箇所】

  • .visible-{breakpoint}-inline.d(-{breakpoint})-inline
  • .visible-{breakpoint}-block.d(-{breakpoint})-block
  • .visible-{breakpoint}-inline-block.d(-{breakpoint})-inline-block
  • .hidden-{breakpoint}.d(-{breakpoint})-none
  • {breakpoint} の種類が4つから5つに増加(変更の詳細はグリッド・システムに記載)

 

要素の表示/非表示(Hiding elements)v4.0.0設定変更

モバイルフレンドリーな開発をより迅速に行うには、デバイスごとに要素を表示および非表示にするためのレスポンシブ表示クラスを使用。同じサイトの全く異なるバージョンを作成するのではなく、代わりに各画面サイズに応じて要素を非表示にする。

要素を非表示にするには、.d-none クラスまたは .d-{sm|md|lg|xl}-none クラスのいずれかを使用。

指定された画面サイズの間隔でのみ要素を表示するには、.d-*-none クラスを .d-*-* クラスと組み合わせ可能(例:.d-none.d-md-block.d-xl-none は、中規模および大規模のデバイスを除くすべての画面サイズの要素を非表示にする。

画面サイズ クラス
全て非表示 .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
見本
lgより広い画面では非表示
lgより狭い画面では非表示
設定例
<div class="d-lg-none">lgより広い画面では非表示</div>
<div class="d-none d-lg-block">lgより狭い画面では非表示</div>

定義済みクラスの組み合わせ

{display} は、block, inline, inline-block, table, table-cell, table-row, flex, inline-flex のいずれかを入れる。

クラス 極小
縦向きモバイル
<576px

横向きモバイル
(≥576px - <768px)

タブレット
(≥768px - <992px)

デスクトップ
(≥992px - <1200px)
特大
ワイド・デスクトップ
(≥1200px)
.d-{display} [表示] [表示] [表示] [表示] [表示]
.d-none [非表示] [非表示] [非表示] [非表示] [非表示]
.d-{display}.d-sm-none [表示] [非表示] [非表示] [非表示] [非表示]
.d-{display}.d-md-none [表示] [表示] [非表示] [非表示] [非表示]
.d-{display}.d-lg-none [表示] [表示] [表示] [非表示] [非表示]
.d-{display}.d-xl-none [表示] [表示] [表示] [表示] [非表示]
.d-none.d-sm-{display} [非表示] [表示] [表示] [表示] [表示]
.d-none.d-md-{display} [非表示] [非表示] [表示] [表示] [表示]
.d-none.d-lg-{display} [非表示] [非表示] [非表示] [表示] [表示]
.d-none.d-xl-{display} [非表示] [非表示] [非表示] [非表示] [表示]
.d-none.d-sm-{display}.d-md-none [非表示] [表示] [非表示] [非表示] [非表示]
.d-none.d-md-{display}.d-lg-none [非表示] [非表示] [表示] [非表示] [非表示]
.d-none.d-lg-{display}.d-xl-none [非表示] [非表示] [非表示] [表示] [非表示]
.d-none.d-sm-{display}.d-lg-none [非表示] [表示] [表示] [非表示] [非表示]
.d-none.d-sm-{display}.d-xl-none [非表示] [表示] [表示] [表示] [非表示]
.d-{display}.d-sm-none.d-md-{display} [表示] [非表示] [表示] [表示] [表示]
.d-{display}.d-sm-none.d-lg-{display} [表示] [非表示] [非表示] [表示] [表示]
.d-{display}.d-sm-none.d-xl-{display} [表示] [非表示] [非表示] [非表示] [表示]
.d-none.d-md-{display}.d-xl-none [非表示] [非表示] [表示] [表示] [非表示]
.d-{display}.d-md-none.d-lg-{display} [表示] [表示] [非表示] [表示] [表示]
.d-{display}.d-md-none.d-xl-{display} [表示] [表示] [非表示] [非表示] [表示]
.d-{display}.d-lg-none.d-xl-{display} [表示] [表示] [表示] [非表示] [表示]
クラス 極小
<576px

≥576px - <768px

≥768px - <992px

≥992px - <1200px
特大
≥1200px
.d-{display}.d-sm-none.d-md-{display}.d-lg-none [表示] [非表示] [表示] [非表示] [非表示]
.d-{display}.d-sm-none.d-md-{display}.d-xl-none [表示] [非表示] [表示] [表示] [非表示]
.d-{display}.d-sm-none.d-lg-{display}.d-xl-none [表示] [非表示] [非表示] [表示] [非表示]
.d-none.d-sm-{display}.d-md-none.d-lg-{display} [非表示] [表示] [非表示] [表示] [表示]
.d-none.d-sm-{display}.d-md-none.d-xl-{display} [非表示] [表示] [非表示] [非表示] [表示]
.d-none.d-sm-{display}.d-lg-none.d-xl-{display} [非表示] [表示] [表示] [非表示] [表示]
.d-{display}.d-md-none.d-lg-{display}.d-xl-none [表示] [表示] [非表示] [表示] [非表示]
.d-none.d-md-{display}.d-lg-none.d-xl-{display} [非表示] [非表示] [表示] [非表示] [表示]
.d-{display}.d-sm-none.d-md-{display}.d-lg-none.d-xl-{display} [表示] [非表示] [表示] [非表示] [表示]
.d-none.d-sm-{display}.d-md-none.d-lg-{display}.d-xl-none [非表示] [表示] [非表示] [表示] [非表示]

【Bootstrap3.xとの変更箇所】

  • ※v3では該当のビューポートのみの表示/非表示だったが、v4では該当のビューポート以上の表示/非表示となる
  • .visible-xs-{display}.d-{display}.d-sm-none/.d-{display}.d-md-none
  • .visible-sm-{display}.d-none.d-md-{display}.d-lg-none
  • .visible-md-{display}.d-none.d-lg-{display}.d-xl-none
  • .visible-lg-{display}.d-none.d-xl-{display}
  • .hidden-xs.d-none.d-sm-{display}/.d-none.d-md-{display}
  • .hidden-sm.d-{display}.d-md-none.d-lg-{display}
  • .hidden-md.d-{display}.d-lg-none.d-xl-{display}
  • .hidden-lg.d-{display}.d-xl-none
    • {display} の種類が block, inline, inline-block の3種類から block, inline, inline-block, table, table-cell, table-cell, flex, inline-flex の9種類に増加

 

印刷時の表示/非表示(Display in print)v4.0.0クラス名変更、v4.0.0-安定版一部追加

印刷表示ユーティリティクラスで印刷する場合、要素の表示値を変更する。レスポンシブの .d-* ユーティリティと同じ display 値のサポートを含む。

  • .d-print-none(印刷時の要素:display: none;(非表示))
  • .d-print-inline(印刷時の要素:display: inline;
  • .d-print-inline-block(印刷時の要素:display: inline-block;
  • .d-print-block(印刷時の要素:display: block;
  • .d-print-table(印刷時の要素:display: table;v4.0.0-安定版追加
  • .d-print-table-row(印刷時の要素:display: table-row;v4.0.0-安定版追加
  • .d-print-table-cell(印刷時の要素:display: table-cell;v4.0.0-安定版追加
  • .d-print-flex(印刷時の要素:display: flex;v4.0.0-安定版追加
  • .d-print-inline-flex(印刷時の要素:display: inline-flex;v4.0.0-安定版追加

【設定】

  • 印刷時に表示を切り替えたい要素に上記のクラスを入れる

【Bootstrap3.xとの変更箇所】

  • .visible-print-block.d-print-block
  • .visible-print-inline.d-print-inline
  • .visible-print-inline-block.d-print-inline-block
  • .hidden-print.d-print-none