Bootstrap4 の基本的な使い方 (6) Utilities

Bootstrap4 の使い方(6) Utilities

Bootstrap のドキュメントを元にした Utilities についての解説やサンプルです。

Bootstrap を使ってサイトを作成する際に利用できるレイアウトや色の設定、配置方法などの便利なユーティリティクラスについて。

この他に以下のページもあるのでよろしければご覧ください。

Layout（Bootstrap の読み込み、グリッドシステム、メディアオブジェクト）
Content（タイポグラフィ、コード、イメージ、フィギュア、テーブル）
Components part1（アラート、バッジ、パンくずリスト、ボタン、ドロップダウン、フォーム、インプットグループ、リストグループ、ページネーション）
Components part2（カード、表示・非表示切り替え、アコーディオン、ツールチップ、ポップオーバー、モーダル、ナビゲーション、ナビゲーションバー）
Components part3（カルーセル、スクロールスパイ）
Utilities（このページ）

以下で説明している Bootstrap のバージョンは、4.1.3 です。

作成日：2018年12月20日

Borders（枠線）

Border Utilities を使うと、ボタンや画像など様々な要素にクラスを指定するだけで簡単に枠線（border）や角丸（border-radius）を設定することができます。

枠線の追加

以下のクラスを指定することで、枠線を追加することができます。

<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

bootstrap.css にはデフォルトで以下が設定されています。

.border {
  border: 1px solid #dee2e6 !important;
}
.border-top {
  border-top: 1px solid #dee2e6 !important;
}
.border-right {
  border-right: 1px solid #dee2e6 !important;
}
.border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}
.border-left {
  border-left: 1px solid #dee2e6 !important;
}

複数のクラスを組み合わせて指定することもできます。

<span class="border-right border-left"></span>
<span class="border-top border-right"></span>

以下のように全ての、または、特定の辺の枠線を表示しない（打ち消す）クラスもあります。以下の例の場合は説明の目的で、全ての span 要素に boder クラスを指定して、border-*-0 で打ち消しています。

<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>

bootstrap.css にはデフォルトで以下が設定されています。

.border-0 {
  border: 0 !important;
}
.border-top-0 {
  border-top: 0 !important;
}
.border-right-0 {
  border-right: 0 !important;
}
.border-bottom-0 {
  border-bottom: 0 !important;
}
.border-left-0 {
  border-left: 0 !important;
}

枠線の色

以下のような枠線の色（コンテクスチュアルカラー）を設定するクラスもあります。

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

角丸（border-radius）

角丸を指定する以下のクラスがあります。

<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-0">

bootstrap.css にはデフォルトで以下が設定されています。

.rounded {
  border-radius: 0.25rem !important;
}
.rounded-top {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}
.rounded-right {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}
.rounded-bottom {
  border-bottom-right-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}
.rounded-left {
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}
.rounded-circle {
  border-radius: 50% !important;
}
.rounded-0 {
  border-radius: 0 !important;
}

Clearfix（クリアフィックス）

クリアフィックス用のクラス clearfix も用意されています（Clearfix Utility）。フロートを解除するには、親要素に clearfix クラスを指定します。

<div class="clearfix"> 
  <img src="../images/120x120.jpg" alt="..." class="float-left"> 
  <img src="../images/120x120.jpg" alt="..." class="float-right"> 
</div>

クリアフィックスの方法はいくつかありますが、Bootstrap4 では以下が設定されています。

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

Close icon（閉じる用アイコン）

モーダルやアラートを閉じるための Close icon（閉じる用アイコン）のクラスが用意されています。button 要素に close クラスを指定すると、右寄せにして半透明で表示し、マウスオーバー時にカーソルをポインターにします。X の文字は × を使います。

スクリーンリーダー用のテキストを aria-label 属性を使って指定します。また、アイコン自体は装飾のためのものなので、スクリーンリーダに読み上げられないように aria-hidden="true" を指定します。

<button type="button" class="close" aria-label="閉じる">
  <span aria-hidden="true">&times;</span>
</button>

bootstrap.css にはデフォルトで以下が設定されています。

.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}
.close:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
  color: #000;
  text-decoration: none;
  opacity: .75;
}
button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
}
.modal-header .close {
  padding: 1rem;
  margin: -1rem -1rem -1rem auto;
}
.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.75rem 1.25rem;
  color: inherit;
}

関連ページ：アラート「閉じるボタン」の追加

Colors（色のクラス）

Color utility クラスを使って文字や背景に色を設定することができます（Colors）。

スクリーンリーダーなどの支援技術への配慮

色を使って意味を伝える方法では、スクリーンリーダーなどを利用しているユーザーにはその意味が伝わりません。色で示されている情報が可視テキストなどで、コンテンツ自体から明らかであるか、または .sr-only クラスなどを利用して追加の代替手段を検討することが推奨されています。

以下は、.sr-only クラスの設定です。スクリーンリーダには読み上げられますが、画面には表示しないように設定されています。

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

文字の色

text-* クラスを指定して文字の色を設定することができます。以下の例の、text-light 及び text-white、text-white-50 クラスを指定した文字には、見易いように暗い背景色のクラス（bg-dark）を同時に指定しています。

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

リンクの色

a 要素（リンク）に文字色のクラスを指定すると、ホバー時などのスタイルもサポートされます（但し、text-white と text-muted クラスの場合は、下線が表示されるのみです）。

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

背景色

文字の色と同様に、以下のような背景色のクラスが用意されています。背景色は、bg-* というクラスを指定することで適用することができます。以下の例では、同時に文字色のクラスと Spacing Utility クラスを指定しています。

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

.bg-transparent

グラデーションを使った背景色

デフォルトでは、背景色のグラデーションは有効になっていません。グラデーションを使った背景色を利用するには、Sass のオプションで $enable-gradients: true; と設定する必要があります。

グラデーションを使った背景色を設定するには、bg-gradient-* クラスを指定します。

<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>

.bg-gradient-primary

.bg-gradient-secondary

.bg-gradient-success

.bg-gradient-danger

.bg-gradient-warning

.bg-gradient-info

.bg-gradient-light

.bg-gradient-dark

display（表示）プロパティ

Display utilities のクラスを使って display プロパティの値を簡単に変更することができます。

書式

ブレークポイントの省略形（sm, md, lg, 及び xl）のないクラスは、min-width: 0 が適用されるため全てのブレークポイント（xs～xl）に適用されます。ブレークポイントの省略形を含むクラスは、それぞれのブレークポイントによりレスポンシブに対応します。以下がクラス名の書式です。

.d-{value}  //全てのビューポートに適用
.d-{breakpoint}-{value} //breakpoint の値により sm, md, lg, 及び xl に適用

上記の {breakpoint} で指定されたブレークポイントはその値及びそれ以上のスクリーンサイズ（画面幅）において適用されます。例えば、d-lg-none クラスは lg 及び xl のスクリーンサイズにおいて display: none; を設定します。

{value} の取りうる値は以下のいずれかになります。（CSS display プロパティの値のサブセット）

none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

以下は、ブロックレベルの div 要素に d-inline クラスを指定してインラインで表示する例です。以下の例では、同時に文字色や背景色のクラスと Spacing Utility クラスを指定しています。

<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>

d-inline

以下は、インラインの span 要素に d-block クラスを指定してブロックレベル要素として表示する例です。

<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>

d-block d-block

要素の表示・非表示

デバイス（スクリーンサイズ）によって要素を表示・非表示にするクラス（responsive display classes）を使うと、レスポンシブサイトを作成する際に便利です。（Hiding elements）

要素を単純に非表示にするには、d-none クラスを使用し、スクリーンサイズに応じて非表示にするには、d-{sm,md,lg,xl}-none クラスを使用します。例えば、d-lg-none クラスは lg 及び xl のスクリーンサイズにおいてその要素を非表示にします。

特定のスクリーンサイズにおいてのみ要素を表示するには、d-*-none クラスと d-*-* クラスを合わせて指定します。例えば、d-none d-md-block d-xl-none を合わせて指定すると、ミディアム（md）及びラージ（lg）サイズの場合のみ表示され、その他の幅では非表示になります。

以下はスクリーンサイズによって表示・非表示にする場合のクラスの指定例です。以下の例では *-block を使用していますが、必要に応じて *-inline や *-inline-block などの表示用のクラスを指定します。


スクリーンサイズ（画面幅）	クラス
全てで非表示	d-none
sm サイズ以上の場合は非表示	d-sm-none
md サイズ以上の場合は非表示	d-md-none
lg サイズ以上の場合は非表示	d-lg-none
sm サイズより小さい場合は非表示	d-none d-sm-block
md サイズより小さい場合は非表示	d-none d-md-block
lg サイズより小さい場合は非表示	d-none d-lg-block
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-md-block d-lg-none
xl の場合のみ表示	d-none d-xl-block

<div class="d-lg-none">lg サイズより大きい場合は非表示</div>
<div class="d-none d-lg-block">lg サイズより小さい場合は非表示</div>

lg サイズより大きい場合は非表示

lg サイズより小さい場合は非表示

印刷時の表示・非表示

以下のクラスを使って、印刷時の表示・非表示を設定することができます。他の表示用のクラスと組み合わせて指定することもできます。

d-print-none
d-print-inline
d-print-inline-block
d-print-block
d-print-table
d-print-table-row
d-print-table-cell
d-print-flex
d-print-inline-flex

<div class="d-print-none">Screen Only (印刷時は非表示)</div>
<div class="d-none d-print-block">Print Only (印刷時のみ表示)</div>
<div class="d-none d-lg-block d-print-block">lg サイズ以上のスクリーンで表示。但し、印刷時は常に表示。</div>

Screen Only (印刷時は非表示)

Print Only (印刷時のみ表示)

lg サイズ以上のスクリーンで表示。但し、印刷時は常に表示。

Embeds（埋め込み）

Embeds utility のクラスを使って、簡単にレスポンシブ対応のビデオやスライドショーを表示することができます。（Embeds）

ルールは<iframe>、<embed>、<video>、<object> 要素に直接適用されます。他の属性のスタイルと合わせる場合は、オプションで明示的な子孫クラスである embed-responsive-item クラスを要素に使用します。また、<iframe> に frameborder="0" を指定する必要はありません。

サンプル

iframe などの埋め込みコンテンツを embed-responsive クラスとアスペクト比のクラスを指定した div 要素で囲み、埋め込みコンテンツに embed-responsive-item クラスを指定します。 embed-responsive-item クラスの指定は任意ですが、指定することが推奨されています。

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/VGRndhjNOoc" allowfullscreen></iframe>
</div>

アスペクト比

アスペクト比は、以下のようなクラスを指定することで変更できます。

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Flexbox（フレックスボックス）

レスポンシブ対応の Flexbox utilities を使うと、グリッドカラム、ナビゲーション、コンポーネントなどのレイアウトや並び順、サイズなどを管理することができます。複雑な実装の場合は、独自の CSS が必要になる場合もあります。

Flexbox の有効化

Flexbox では、要素に display: flex（インライン要素に使う場合は、display: inline-flex）を指定することでその要素を「フレックスコンテナ（Flex Container）」として扱えるようにします。

Bootstratp の場合は、要素に display utilities の d-flex（または d-inline-flex）クラスを適用することでフレックスコンテナとし、その直接の子要素が（自動的に）フレックスアイテム（Frex Item）になります。必要に応じて、更に Flexbox のプロパティを適用します。

<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
<div class="d-inline-flex p-2 mt-3 bd-highlight">I'm an inline flexbox container!</div>

I'm a flexbox container!

I'm an inline flexbox container!

この例やその他の Flexbox 関連の例では、サンプルを見やすくするために Spacing Utilities や以下のクラス（bd-highlight）のスタイルを適用しています。但し、これらのクラスの指定は、コードを見る際は邪魔なので、以下では省略します。

.bd-highlight {
  background-color: rgba(86,61,124,.15);
  border: 1px solid rgba(86,61,124,.15);
}

フレックスコンテナに適用する display utilities はレスポンシブ用を含め以下のようなクラスがあります。

d-flex
d-inline-flex
d-sm-flex
d-sm-inline-flex
d-md-flex
d-md-inline-flex
d-lg-flex
d-lg-inline-flex
d-xl-flex
d-xl-inline-flex

Direction（方向）

flex-direction はフレックスコンテナ内のフレックスアイテムを並べる方向を設定するプロパティで、主軸を定義します。デフォルト（初期値）は row で、正順（ドキュメントの方向：この例では ltr 左から右方向）の横並びになります。

Bootstrap の場合、フレックスコンテナに direction utilities のクラスで指定します。

ブラウザのデフォルトである水平方向の通常の配置（flex-row）の場合は省略することができますが、レスポンシブレイアウトなどでは、場合によっては明示的に指定する必要があります。

水平方向の横並びは以下のクラスが指定できます。

flex-row ：左から右へ（デフォルト）
flex-row-reverse ：右から左へ

<div class="d-flex flex-row">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

<div class="d-flex flex-row-reverse">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

垂直方向は、flex-column または flex-column-reverse クラスが指定できます。

flex-column ：上を始端に下へ縦並び
flex-column-reverse ：下を始端に上へ縦並び

<div class="d-flex flex-column">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

<div class="d-flex flex-column-reverse">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

flex-direction プロパティに関しては、レスポンシブ用のクラスを含めると以下のようなクラスがあります。

flex-row（デフォルト）
flex-row-reverse
flex-column
flex-column-reverse
flex-sm-row
flex-sm-row-reverse
flex-sm-column
flex-sm-column-reverse
flex-md-row
flex-md-row-reverse
flex-md-column
flex-md-column-reverse
flex-lg-row
flex-lg-row-reverse
flex-lg-column
flex-lg-column-reverse
flex-xl-row
flex-xl-row-reverse
flex-xl-column
flex-xl-column-reverse

Justify content（主軸方向整列位置）

justify-content は、主軸（main axis）方向の整列位置を指定するプロパティで、フレックスコンテナ内のフレックスアイテムをどのように主軸に沿ってレイアウトするかを定義します。

Bootstrap の場合、フレックスコンテナに justify-content utilities のクラス（.justify-content-*）を使用します。

.justify-content-start：始端揃え（デフォルト）
.justify-content-end：終端揃え
.justify-content-center：中央揃え
.justify-content-between：両端揃えで均等割り（最初のフレックスアイテムを始端に、最後のフレックスアイテムを終端に揃えて残りを均等配置）
.justify-content-around：均等割り（全てを均等割り配置）

flex-direction が flex-row の場合は水平方向（x 軸）の位置、flex-column の場合は垂直方向（y 軸）の位置の整列を指定することになります。

以下の例は、flex-direction を指定していないので、デフォルトの flex-row が適用され、水平方向（x 軸）の位置の指定になります。

<div class="d-flex justify-content-start">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex justify-content-end">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex justify-content-center">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex justify-content-between">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex justify-content-around">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

以下は、フレックスコンテナに flex-column を指定しているので垂直方向（y 軸）の位置の整列を指定しています。整列位置がわかり易いようにフレックスコンテナに高さ（height: 170px;）を指定しています。

<div class="d-flex flex-column justify-content-start">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex flex-column justify-content-end">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex flex-column justify-content-center">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex flex-column justify-content-between">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex flex-column justify-content-around">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

justify-content プロパティに関しては、レスポンシブ用のクラスを含めると以下のようなクラスがあります。

justify-content-start（デフォルト）
justify-content-end
justify-content-center
justify-content-between
justify-content-around
justify-content-sm-start
justify-content-sm-end
justify-content-sm-center
justify-content-sm-between
justify-content-sm-around
justify-content-md-start
justify-content-md-end
justify-content-md-center
justify-content-md-between
justify-content-md-around
justify-content-lg-start
justify-content-lg-end
justify-content-lg-center
justify-content-lg-between
justify-content-lg-around
justify-content-xl-start
justify-content-xl-end
justify-content-xl-center
justify-content-xl-between
justify-content-xl-around

Align items（交差軸方向整列位置）

align-items は交差軸（cross axis）方向の整列位置を指定するプロパティで、フレックスコンテナ内のフレックスアイテムをどのように交差軸に沿ってレイアウトするかを定義します。デフォルトは stretch です。但し、stretch が有効なのはフレックスアイテムに高さが指定されていない場合のみになります。

Bootstrap の場合、フレックスコンテナに align-items utilities のクラス（.align-items-*）を使用します。

.align-items-start：始端揃え。フレックスコンテナの交差軸の起点に揃えます。
.align-items-end：終端揃え。フレックスコンテナの交差軸の終点に揃えます。
.align-items-center：中央揃え。フレックスコンテナの交差軸の中央に揃えます。
.align-items-baseline：ベースライン揃え（フレックスアイテムごとのテキストのベースラインが揃うようにします）
.align-items-stretch：高さを拡張（デフォルト）。フレックスアイテムに高さが指定されていない場合、全てのフレックスアイテムの高さをフレックスコンテナの高さまで広げます。

以下の例は、flex-direction を指定していないので、デフォルトの flex-row が適用されます。また、レイアウトがわかり易いようにフレックスコンテナに高さ（height: 100px;）を指定しています。

<div class="d-flex align-items-start">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex align-items-end">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex align-items-center">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex align-items-baseline">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex align-items-stretch">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

以下は、フレックスコンテナに flex-column を指定している例です。

<div class="d-flex flex-column align-items-start">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex flex-column align-items-end">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex flex-column align-items-center">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex flex-column align-items-baseline">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex flex-column align-items-stretch">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

align-items プロパティに関しては、レスポンシブ用のクラスを含めると以下のようなクラスがあります。

align-items-start
align-items-end
align-items-center
align-items-baseline
align-items-stretch
align-items-sm-start
align-items-sm-end
align-items-sm-center
align-items-sm-baseline
align-items-sm-stretch
align-items-md-start
align-items-md-end
align-items-md-center
align-items-md-baseline
align-items-md-stretch
align-items-lg-start
align-items-lg-end
align-items-lg-center
align-items-lg-baseline
align-items-lg-stretch
align-items-xl-start
align-items-xl-end
align-items-xl-center
align-items-xl-baseline
align-items-xl-stretch

Align self（交差軸方向個別整列位置）

align-self は個々のフレックスアイテムの交差軸（cross axis）方向の整列位置を指定します。フレックスコンテナに指定する align-items と同じ機能ですが、親要素に記述する align-items よりも優先されます。デフォルトは、auto で親要素の align-items の値を継承します。

Bootstrap の場合、フレックスアイテムに align-self utilities のクラス（.align-self-*）を使用します。

.align-self-start：始端揃え。フレックスコンテナの交差軸の起点に揃えます。
.align-self-end：終端揃え。フレックスコンテナの交差軸の終点に揃えます。
.align-self-center：中央揃え。フレックスコンテナの交差軸の中央に揃えます。
.align-self-baseline：ベースライン揃え。フレックスアイテム内のベースラインの位置に揃えるように、フレックスコンテナの交差軸の起点からアイテムの位置を揃えます。
.align-self-stretch：高さを拡張。フレックスコンテナの交差軸の幅に合わせて伸縮して表示されます。

以下の例では2つ目のフレックスアイテムに align-self-* クラスを指定しています（1つ目と3つ目は、親要素のデフォルト strech です）。また、わかり易いように親要素のフレックスコンテナに高さ（height:100px;）を指定しています。

<div class="d-flex">
  <div>Flex item 1</div>
  <div class="align-self-start">Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex">
  <div>Flex item 1</div>
  <div class="align-self-end">Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex">
  <div>Flex item 1</div>
  <div class="align-self-center">Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex">
  <div>Flex item 1</div>
  <div class="align-self-baseline">Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex">
  <div>Flex item 1</div>
  <div class="align-self-stretch">Flex item 2</div>
  <div>Flex item 3</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

以下は、フレックスコンテナに flex-column を指定している例です。

<div class="d-flex flex-column">
  <div >Flex item 1</div>
  <div class="align-self-start">Flex item 2</div>
  <div >Flex item 3</div>
</div>
<div class="d-flex flex-column">
  <div >Flex item 1</div>
  <div class="align-self-end">Flex item 2</div>
  <div >Flex item 3</div>
</div>
<div class="d-flex flex-column">
  <div >Flex item 1</div>
  <div class="align-self-center">Flex item 2</div>
  <div >Flex item 3</div>
</div>
<div class="d-flex flex-column">
  <div >Flex item 1</div>
  <div class="align-self-baseline">Flex item 2</div>
  <div >Flex item 3</div>
</div>
<div class="d-flex flex-column">
  <div >Flex item 1</div>
  <div class="align-self-stretch">Flex item 2</div>
  <div >Flex item 3</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

align-self プロパティに関しては、レスポンシブ用のクラスを含めると以下のようなクラスがあります。

align-self-start
align-self-end
align-self-center
align-self-baseline
align-self-stretch
align-self-sm-start
align-self-sm-end
align-self-sm-center
align-self-sm-baseline
align-self-sm-stretch
align-self-md-start
align-self-md-end
align-self-md-center
align-self-md-baseline
align-self-md-stretch
align-self-lg-start
align-self-lg-end
align-self-lg-center
align-self-lg-baseline
align-self-lg-stretch
align-self-xl-start
align-self-xl-end
align-self-xl-center
align-self-xl-baseline
align-self-xl-stretch

Fill（均等配分）

Bootstrap の flex-fill クラスをフレックスアイテムに指定すると、flex: 1 1 auto; が適用され、水平方向の余分な領域を均等に配分することができます。

flex: 1 1 auto; は以下と同じ意味になります。（flex プロパティ）

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

フレックスアイテムのコンテンツの内容が同じであれば、等幅に分割されます。

<div class="d-flex">
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item</div>
</div>

Flex item

以下は2つ目のフレックスアイテムのコンテンツが長い場合の例で、余った領域を均等に配分します。

<div class="d-flex">
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item with extra content</div>
  <div class="p-2 flex-fill">Flex item</div>
</div>

Flex item

Flex item with extra content

Flex item

レスポンシブ用のクラスを含めると以下のようなクラスがあります。

flex-fill
flex-sm-fill
flex-md-fill
flex-lg-fill
flex-xl-fill

Grow and shrink（伸縮）

.flex-grow-*

flex-grow プロパティは、フレックスアイテム全体の幅がうレックスコンテナの主軸（main axis）の幅に満たない場合に伸びる比率を数値で指定します。

Bootstrap の場合、flex-grow-* utilities のクラスを使ってフレックスアイテムが使用可能なスペースを占めることができます。

以下の例では、flex-grow-1 クラスを指定している要素は使用可能なスペース全てを占有し、残りの２つの要素はコンテンツに必要なスペースのみを占めています。

<div class="d-flex">
  <div class="flex-grow-1">Flex item</div>
  <div>Second flex item</div>
  <div>Third flex item</div>
</div>

Flex item

Second flex item

Third flex item

.flex-shrink-*

flex-shrink プロパティは、フレックスアイテム全体の幅がフレックスコンテナの主軸（main axis）の幅より大きい場合に縮む比率を数値で指定します。

Bootstrap の場合、flex-shrink-* utilities のクラスを使ってフレックスアイテムの占める幅を縮小することができます。

以下の例では、flex-shrink-1 クラスを指定している要素は強制的に改行されてその幅を縮小し、w-100（width: 100%）クラスを指定した要素に可能な限りの幅を占有させています。

<div class="d-flex">
  <div class="w-100">Flex item</div>
  <div class="flex-shrink-1">Flex item</div>
</div>

Flex item

Auto margins

Flexbox と margin プロパティの値 auto を組み合わせると、自動的に余白の調整を行うことができます（Auto margins）。

但し、IE10 と IE11 では、親要素がデフォルト以外の justify-content の値を持つフレックスアイテムの margin: auto; を正しくサポートしていません（参照：StackOverflow）。

以下は、margin-right: auto;（mr-auto クラス）と margin-left: auto;（ml-auto クラス）を利用して要素を配置（自動的に余白の調整を行う）する例です。

<div class="d-flex">
  <div>Flex item</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>

<div class="d-flex">
  <div class="mr-auto">Flex item</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>

<div class="d-flex">
  <div>Flex item</div>
  <div>Flex item</div>
  <div class="ml-auto">Flex item</div>
</div>

Flex item

align-items と flex-column との併用

align-items と flex-column（flex-direction: column）を margin-top: auto;（mt-auto クラス）または margin-bottom: auto;（mb-auto クラス）と組み合わせると垂直方向の余白を自動調整することができます。（With align-items）

<div class="d-flex align-items-start flex-column" style="height: 200px;">
  <div class="mb-auto">Flex item</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>

<div class="d-flex align-items-end flex-column" style="height: 200px;">
  <div>Flex item</div>
  <div>Flex item</div>
  <div class="mt-auto">Flex item</div>
</div>

Flex item

Wrap（折り返し）

flex-wrap はフレックスコンテナ内のフレックスアイテムの折り返しとその方向を決めるプロパティです。

デフォルトの nowrap ではフレックスコンテナの大きさが、フレックスアイテムの大きさの合計より小さくても1行に収めようとするため、フレックスアイテムの大きさは適宜縮小されます。（flex-direction が column または column-reverse の場合は、1列に収めようとします）。

flex-direction が row または row-reverse の場合は幅に依存し、flex-direction が column または column-reverse の場合は高さに依存します。

Bootstrap の場合、フレックスコンテナに flex-wrap utilities のクラス（.flex-nowrap または .flex-wrap-*）を使用します。

<div class="d-flex flex-nowrap">
    <div>Flex item 1</div>
    <div>Flex item 2</div>
    ・・・中略・・・
    <div>Flex item 14</div>
    <div>Flex item 15</div> 
  </div>

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

<div class="d-flex flex-wrap">
    <div>Flex item 1</div>
    <div>Flex item 2</div>
    ・・・中略・・・
    <div>Flex item 14</div>
    <div>Flex item 15</div> 
  </div>

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

<div class="d-flex flex-wrap-reverse">
    <div>Flex item 1</div>
    <div>Flex item 2</div>
    ・・・中略・・・
    <div>Flex item 14</div>
    <div>Flex item 15</div> 
  </div>

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

以下は、flex-direction が column の場合の例です。nowrap の場合は、高さは指定していませんが（小さな値を指定するとフレックスアイテムがはみ出てしまいます）、その他の場合は、フレックスコンテナの高さを一定（200px）にしています。

<div class="d-flex flex-nowrap flex-column">
    <div>Flex item 1</div>
    <div>Flex item 2</div>
    ・・・中略・・・
    <div>Flex item 14</div>
    <div>Flex item 15</div> 
  </div>

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

<div class="d-flex flex-wrap flex-column" style="height:200px;">
    <div>Flex item 1</div>
    <div>Flex item 2</div>
    ・・・中略・・・
    <div>Flex item 14</div>
    <div>Flex item 15</div> 
  </div>

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

<div class="d-flex flex-wrap-reverse flex-column" style="height:200px;">
    <div>Flex item 1</div>
    <div>Flex item 2</div>
    ・・・中略・・・
    <div>Flex item 14</div>
    <div>Flex item 15</div> 
  </div>

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

レスポンシブ用のクラスを含めると以下のようなクラスがあります。

flex-nowrap
flex-wrap
flex-wrap-reverse
flex-sm-nowrap
flex-sm-wrap
flex-sm-wrap-reverse
flex-md-nowrap
flex-md-wrap
flex-md-wrap-reverse
flex-lg-nowrap
flex-lg-wrap
flex-lg-wrap-reverse
flex-xl-nowrap
flex-xl-wrap
flex-xl-wrap-reverse

Order（表示順）

フレックスアイテムは通常 HTML の記述順に配置されますが、order プロパティーを使うことでフレックスアイテムを任意の順で並べ替えることができます。

Bootstrap の場合、order utilities のクラス（.order-*）を使ってフレックスアイテムの表示順を指定することができます。但し、Bootstrap の order utilities クラスには、.order-0 から .order-12 と以下の .order-first と .order-last しか用意されていません（order プロパティは、フレックスコンテナ内でフレックスアイテムを配置する順序を整数で指定します）。

.order-first {
  order: -1;
}

.order-last {
  order: 13;
}

<div class="d-flex flex-nowrap">
  <div class="order-3">Flex item 1</div>
  <div class="order-1">Flex item 2</div>
  <div class="order-2">Flex item 3</div>
</div>

Flex item 1

Flex item 2

Flex item 3

レスポンシブ用のクラスを含めると以下のようなクラスがあります。

order-0
order-1
order-2
order-3
order-4
order-5
order-6
order-7
order-8
order-9
order-10
order-11
order-12
order-sm-0
order-sm-1
order-sm-2
中略　
order-sm-10
order-sm-11
order-sm-12
order-md-0
order-md-1
order-md-2
中略　
order-md-10
order-md-11
order-md-12
order-lg-0
order-lg-1
中略　
order-lg-11
order-lg-12
order-xl-0
order-xl-1
中略　
order-xl-11
order-xl-12

Align content（折り返しアイテム整列位置）

align-content は、フレックスコンテナ内の折り返したフレックスアイテムの交差軸（cross axis）方向の整列位置を指定（制御）するプロパティです。flex-wrap の値が、wrap または wrap-reverse の場合にのみ有効になります。

このプロパティはフレックスンテナが複数行のフレックスアイテムをもっている場合に効果があります。フレックスアイテムが一行だった場合は、レイアウトに影響を与えません。

Bootstrap の場合、フレックスコンテナに align-content utilities のクラス（.align-content-*）を使用します。

.align-content-start：始端揃え
.align-content-end：終端揃え
.align-content-center：中央揃え
.align-content-between：両端揃えで均等割り
.align-content-around：均等割り
.align-content-stretch：高さ（幅）を拡張

以下の例では、フレックスコンテナに flex-wrap クラスを指定し、高さ（height:200px）も指定しています。

<div class="d-flex align-content-start flex-wrap" style="height: 200px">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
　　　・・・中略・・・
  <div>Flex item 13</div>
  <div>Flex item 14</div>
  <div>Flex item 15</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

<div class="d-flex align-content-end flex-wrap" style="height: 200px">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
　　　・・・中略・・・
  <div>Flex item 13</div>
  <div>Flex item 14</div>
  <div>Flex item 15</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

<div class="d-flex align-content-center flex-wrap" style="height: 200px">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
　　　・・・中略・・・
  <div>Flex item 13</div>
  <div>Flex item 14</div>
  <div>Flex item 15</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

<div class="d-flex align-content-between flex-wrap" style="height: 200px">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
　　　・・・中略・・・
  <div>Flex item 13</div>
  <div>Flex item 14</div>
  <div>Flex item 15</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

<div class="d-flex align-content-around flex-wrap" style="height: 200px">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
　　　・・・中略・・・
  <div>Flex item 13</div>
  <div>Flex item 14</div>
  <div>Flex item 15</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

<div class="d-flex align-content-stretch flex-wrap" style="height: 200px">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
　　　・・・中略・・・
  <div>Flex item 13</div>
  <div>Flex item 14</div>
  <div>Flex item 15</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

以下は、フレックスコンテナに flex-column クラスを指定した例です。

<div class="d-flex flex-column align-content-start flex-wrap" style="height: 200px">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
　　　・・・中略・・・
  <div>Flex item 13</div>
  <div>Flex item 14</div>
  <div>Flex item 15</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

<div class="d-flex flex-column align-content-end flex-wrap" style="height: 200px">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
　　　・・・中略・・・
  <div>Flex item 13</div>
  <div>Flex item 14</div>
  <div>Flex item 15</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

<div class="d-flex flex-column align-content-center flex-wrap" style="height: 200px">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
　　　・・・中略・・・
  <div>Flex item 13</div>
  <div>Flex item 14</div>
  <div>Flex item 15</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

<div class="d-flex flex-column align-content-between flex-wrap" style="height: 200px">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
　　　・・・中略・・・
  <div>Flex item 13</div>
  <div>Flex item 14</div>
  <div>Flex item 15</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

<div class="d-flex flex-column align-content-around flex-wrap" style="height: 200px">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
　　　・・・中略・・・
  <div>Flex item 13</div>
  <div>Flex item 14</div>
  <div>Flex item 15</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

<div class="d-flex flex-column align-content-stretch flex-wrap" style="height: 200px">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
　　　・・・中略・・・
  <div>Flex item 13</div>
  <div>Flex item 14</div>
  <div>Flex item 15</div>
</div>

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

レスポンシブ用のクラスを含めると以下のようなクラスがあります。

align-content-start
align-content-end
align-content-center
align-content-around
align-content-stretch
align-content-sm-start
align-content-sm-end
align-content-sm-center
align-content-sm-around
align-content-sm-stretch
align-content-md-start
align-content-md-end
align-content-md-center
align-content-md-around
align-content-md-stretch
align-content-lg-start
align-content-lg-end
align-content-lg-center
align-content-lg-around
align-content-lg-stretch
align-content-xl-start
align-content-xl-end
align-content-xl-center
align-content-xl-around
align-content-xl-stretch

Float（フロート）

Float Utility クラスを使って、要素のフロートを設定することができます。レスポンシブ対応のクラスを指定することで特定のビューポートでのフローとの設定も可能です。但し、フローとは Flexbox のフレックスアイテムに対しては機能しません。

<div class="float-left">Float left on all viewport sizes</div><br><br>
<div class="float-right">Float right on all viewport sizes</div><br><br>
<div class="float-none">Don't float on all viewport sizes</div>

Float left on all viewport sizes

Float right on all viewport sizes

Don't float on all viewport sizes

Sass Mixins

Sass のミックスインを使用して以下のように設定することもできます。

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

レスポンシブ対応のフロートクラス

ビューポートサイズによってフロートを設定できるクラスもあります。

<div class="float-sm-right">Float right on viewports sized SM (small) or wider</div><br>
<div class="float-md-right">Float right on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-right">Float right on viewports sized LG (large) or wider</div><br>
<div class="float-xl-right">Float right on viewports sized XL (extra-large) or wider</div>

Float right on viewports sized SM (small) or wider

Float right on viewports sized MD (medium) or wider

Float right on viewports sized LG (large) or wider

Float right on viewports sized XL (extra-large) or wider

以下がフロート関連のクラスです。

float-left
float-right
float-none
float-sm-left
float-sm-right
float-sm-none
float-md-left
float-md-right
float-md-none
float-lg-left
float-lg-right
float-lg-none
float-xl-left
float-xl-right
float-xl-none

Position（配置方法）

Position Utility クラスを使って、要素の配置を設定することができます。

以下のような、position:static や position: absolute などの position プロパティを設定するクラスがあります。但し、レスポンシブ対応はしていません。

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

以下のような画面上部や下部に固定するクラスも用意されています。

<div class="fixed-top">Fixed Top（上部に固定表示）</div>
<div class="fixed-bottom">Fixed Bottom（下部に固定表示）</div>

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

また、以下のような CSS の position: sticky を使って画面上部に固定するクラスも用意されていますが、まだいくつかのブラウザでこの機能はサポートされていないようです。（caniuse）

<div class="sticky-top">Sticky Top</div>

@supports (position: sticky) {
  .sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}

Screenreaders（スクリーンリーダー）

Screenreader utilities を使ってスクリーンリーダー以外のデバイスで要素を非表示にすることができます。

スクリーンリーダー限定テキスト

例えばフォームで placeholder 属性でラベルをテキストボックス内に表示したりしますが、label 要素を省略してしまうと目の不自由な方がスクリーンリーダー（Screen Reader）からラベルが読み上げられなくなってしまいます。また、アイコンなどを画像やアイコンフォントだけで表示しているコンテンツなどは、スクリーンリーダーにその意味が読み上げられません。

対策としては、スクリーンリーダには読み上げられるが、画面には表示しないようにします。以下は、.sr-only クラスの設定です。スクリーンリーダには読み上げられますが、画面には表示しないように設定されています。

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

sr-only と sr-only-focusable クラスを併用すると、キーボードのみのユーザーなどが要素にフォーカスするとその要素を表示するようにできます。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

以下のように、Sass のミックスインとして使用することもできます。

// Usage as a mixin
.skip-navigation {
  @include sr-only;
  @include sr-only-focusable;
}

Shadows（ボックスシャドウ）

デフォルトでは、ボックスシャドウのコンポーネントは有効になっていませんが、box-shadow utility のクラスを利用すると、簡単にボックスシャドウをつけることができます。ボックスシャドウなしの shadow-none と３つのサイズの異なるボックスシャドウのクラスがあります。

<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>

No shadow

Small shadow

Regular shadow

Larger shadow

Sizing（幅・高さ）

Width and Height utilities を使って幅や高さを設定することができます。

このユーティリティは、_variables.scss に記述されている $sizes Sass map から生成されています。デフォルトでは、25%、50%、75%、100% と auto が設定されていますが、必要に応じて値を追加することができます。

<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>

Width 25%

Width 50%

Width 75%

Width 100%

Width auto

<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
  <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
</div>

Height 25%

Height 50%

Height 75%

Height 100%

Height auto

max-width: 100%; や max-height: 100%; のクラスも用意されています。

<img class="mw-100" src="../images/max-width100.jpg" alt="Max-width：100%サンプル">

<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
</div>

Max-height 100%

Spacing（マージン・パディング）

Bootstrap には多数のマージンやパディングを設定する margin and padding utility のクラスが用意されています。

これらのクラスの値はデフォルトでは、0.25rem から 3rem までが Sass map で設定されています。

書式

ブレークポイントの省略形（sm, md, lg, 及び xl）のないクラスは、全てのブレークポイント（xs～xl）に適用されます。ブレークポイントの省略形を含むクラスは、それぞれのブレークポイントによりレスポンシブに対応します。以下がクラス名の書式です。

.{property}{sides}-{size}  //全てのビューポートに適用
.{property}{sides}-{breakpoint}-{size} //breakpoint の値により sm, md, lg, 及び xl に適用

{property} の取りうる値は以下のいずれかになります。

m ：マージン（margin）
p ：パディング（padding）

{sides} の取りうる値は以下のいずれかになります。

t ： margin-top または padding-top
b ： margin-bottom または padding-bottom
l ： margin-left または padding-left
r ： margin-right または padding-right
x ： *-left と *-right の両方
y ： *-top と *-bottom の両方
なし（空白）：四辺全ての margin または padding

{size} の取りうる値は以下のいずれかになります。

0 ：margin または padding の値を 0 に設定
1 ：margin または padding の値を（デフォルトでは）$spacer * 0.25 に設定（0.25rem）
2 ：margin または padding の値を（デフォルトでは）$spacer * 0.5 に設定（0.5rem）
3 ：margin または padding の値を（デフォルトでは）$spacer に設定（1rem）
4 ：margin または padding の値を（デフォルトでは）$spacer * 1.5 に設定（1.5rem）
5 ：margin または padding の値を（デフォルトでは）$spacer * 3 に設定（3rem）
auto ：margin または padding の値を auto に設定

※デフォルトでは、$spacer の値は 1rem です

以下は、デフォルトの bootstrap.css に設定されているいくつかの例です。

/*マージンの例*/
.m-0 {
  margin: 0 !important;
}
.mt-0, .my-0 {
  margin-top: 0 !important;
}
.mr-0, .mx-0 {
  margin-right: 0 !important;
}
.mb-0, .my-0 {
  margin-bottom: 0 !important;
}
.ml-0, .mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}
.mt-1, .my-1 {
  margin-top: 0.25rem !important;
}
.mr-1, .mx-1 {
  margin-right: 0.25rem !important;
}
.mb-1, .my-1 {
  margin-bottom: 0.25rem !important;
}
.ml-1, .mx-1 {
  margin-left: 0.25rem !important;
}
.m-2 {
  margin: 0.5rem !important;
}
・・・中略・・・

@media (min-width: 576px) {
  .m-sm-0 {
    margin: 0 !important;
  }
  .mt-sm-0, .my-sm-0 {
    margin-top: 0 !important;
  }
  .mr-sm-0, .mx-sm-0 {
    margin-right: 0 !important;
  }
  .mb-sm-0, .my-sm-0 {
    margin-bottom: 0 !important;
  }
  ・・・中略・・・
}

/*パディングの例*/
.p-0 {
  padding: 0 !important;
}
.pt-0, .py-0 {
  padding-top: 0 !important;
}
.pr-0, .px-0 {
  padding-right: 0 !important;
}
.pb-0, .py-0 {
  padding-bottom: 0 !important;
}
.pl-0, .px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}
.pt-1, .py-1 {
  padding-top: 0.25rem !important;
}
.pr-1, .px-1 {
  padding-right: 0.25rem !important;
}
.pb-1, .py-1 {
  padding-bottom: 0.25rem !important;
}
.pl-1, .px-1 {
  padding-left: 0.25rem !important;
}
.p-2 {
  padding: 0.5rem !important;
}
・・・中略・・・

@media (min-width: 768px) {
 .p-md-4 {
    padding: 1.5rem !important;
  }
  .pt-md-4, .py-md-4 {
    padding-top: 1.5rem !important;
  }
  .pr-md-4, .px-md-4 {
    padding-right: 1.5rem !important;
  }
  .pb-md-4, .py-md-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-md-4,.px-md-4 {
    padding-left: 1.5rem !important;
  }
  ・・・中略・・・
}

以下は使用例です。

<div class="p-1 mt-1 mr-3">p-1 mt-1 mr-3</div>
<div class="p-2 mt-2 mr-4">p-2 mt-2 mr-4</div>
<div class="p-3 mt-3 mr-5">p-3 mt-3 mr-5</div>

p-1 mt-1 mr-3

p-2 mt-2 mr-4

p-3 mt-3 mr-5

水平方向のセンタリング

ブロックレベル要素に幅（width）を指定して、左右のマージンの値に「auto」を指定することで、その要素全体をセンタリング（中央寄せ）できます。

Bootstrap には mx-auto クラス（左右のマージン値を auto）があるのでこれを指定すると中方寄せすることができます（但し、ブロック要素で幅を指定してある必要があります）。

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Centered element

Text（テキスト）

Text utilities を使用すると文字列（テキスト）の行揃え、折り返し、太さなどを制御することができます。

テキストの行揃え

Bootstrap には、以下の行揃えのクラスが用意されています。

text-justify：両端揃え（均等割り付け）
text-left：左揃え（初期値）
text-center：中央揃え
text-right：右揃え

またレスポンシブ用の text-{breakpoint}-left、text-{breakpoint}-center、text-{breakpoint}-right も用意されています。

<p class="text-justify">Justify aligned text on all viewport sizes.</p>
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<hr>
<p class="text-sm-right">Right aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-right">Right aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-right">Right aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-right">Right aligned text on viewports sized XL (extra-large) or wider.</p>

Justify aligned text on all viewport sizes.

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Right aligned text on viewports sized SM (small) or wider.

Right aligned text on viewports sized MD (medium) or wider.

Right aligned text on viewports sized LG (large) or wider.

Right aligned text on viewports sized XL (extra-large) or wider.

テキストの改行と切捨て（省略）

テキストを途中で改行（折り返し）させないようにするには、text-nowrap クラスを指定します。white-space プロパティを使って以下のように設定されています。

.text-nowrap {
  white-space: nowrap !important;
}

以下はサンプルです。親要素（背景色を指定）の幅を 8rem にしていますが、テキストは折り返さないで表示されます。

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

This text should overflow the parent.

text-truncate クラスは以下のように、text-overflow: ellipsis や white-space: nowrap を使って設定されています。収まらない文章は切り取られ（省略され）、切り取られた部分に省略記号が表示されます。

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

このクラスは、ブロックレベル要素またはインラインブロック要素に指定する必要があります。

<!-- Block level -->
<div class="text-truncate" style="max-width: 150px;"> Praeterea iter est quasdam res quas ex communi. </div>

<!-- Inline-block level (d-inline-block class)--> 
<span class="d-inline-block text-truncate" style="max-width: 150px;"> Praeterea iter est quasdam res quas ex communi. </span>

Praeterea iter est quasdam res quas ex communi.

テキストの大文字・小文字変換

text-transform プロパティを使った、テキストの文字を大文字や小文字に変換するクラスも用意されています。text-capitalize クラスは単語の最初の一文字のみを大文字に変換します。

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Lowercased text.

Uppercased text.

CapiTaliZed text.

文字の太さとイタリック

文字の太さ（font-weight）を変更したり、スタイル（font-style）をイタリック書体で表示するクラスも用意されています。

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>

Bold text.

Normal weight text.

Light weight text.

Italic text.

等幅フォント（Monospace）

text-monospace クラスを指定すると、等幅フォントで表示されます。

<p class="text-monospace">This is in monospace</p>
<p>This is NOT in monospace</p>

This is in monospace

This is NOT in monospace

.text-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

text-muted クラス

text-muted クラスを指定すると、文字色が薄く表示（color: #6c757d ）されます。

<div class="text-muted">Muted Text （控えめなテキスト）</div>

Muted Text （控えめなテキスト）

Vertical alignment（垂直位置）

vertical-align プロパティを使った垂直方向の位置を指定する vertical-alignment utilities のクラスが用意されています。これらのクラスは、以下の要素に対してのみ有効です。

inline（インライン要素）
inline-block（インラインブロック要素）
inline-table（インラインテーブル要素）
table cell （テーブルセル要素）

以下のクラスがあります。（以下の説明はインライン要素の場合です）

align-baseline：初期値。インラインボックスのベースラインを親ボックスのベースラインに揃えます。
align-top：インラインボックスの上辺を、行ボックスの上辺に揃えます。
align-middle：インラインボックスの中心線を、親ボックスのベースラインから、小文字の「x」の半分の高さ分上げます。
align-bottom：インラインボックスの下辺を、行ボックスの下辺に揃えます。
align-text-bottom：インラインボックスの下辺を、親要素のフォントの下辺に揃えます。
align-text-top：インラインボックスの上辺を、親要素のフォントの上辺に揃えます。

以下はインライン要素に適用する場合の例です。この例では、わかり易いように line-height: 3rem を指定しています。（align-text-top と align-text-bottom が逆のような気がしますが、Bootstrap のサンプルもこのようになっているようです。。。）

<div style="line-height:3rem"> 
  <span class="align-baseline">baseline</span> 
  <span class="align-top">top</span> 
  <span class="align-middle">middle</span> 
  <span class="align-bottom">bottom</span> 
  <span class="align-text-top">text-top</span> 
  <span class="align-text-bottom">text-bottom</span> 
</div>

baseline top middle bottom text-top text-bottom

以下はテーブルのセル要素に指定した場合の例です。わかり易いように、テーブルの高さを height: 100px; に設定しています。

<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>

baseline

top

middle

bottom

text-top

text-bottom

Visibility（可視性）

visibility utilities の visible または invisible クラスを使うと、要素のレイアウトを変更することなく、その要素の表示・非表示を切り替えることができます。（display プロパティの値を変更しません）

<div class="visible">...</div>
<div class="invisible">...</div>

invisible クラスは、visibility プロパティを使って要素の領域を確保したまま非表示にします。

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

Web Design Leaves

Bootstrap4 の使い方(6) Utilities

Borders（枠線）

角丸（border-radius）

Clearfix（クリアフィックス）

Close icon（閉じる用アイコン）

Colors（色のクラス）

スクリーンリーダーなどの支援技術への配慮

文字の色

背景色

display（表示）プロパティ

要素の表示・非表示

印刷時の表示・非表示

Embeds（埋め込み）

Flexbox（フレックスボックス）

Direction（方向）

Justify content（主軸方向整列位置）

Align items（交差軸方向整列位置）

Align self（交差軸方向個別整列位置）

Fill（均等配分）

Grow and shrink（伸縮）

Auto margins

Wrap（折り返し）

Order（表示順）

Align content（折り返しアイテム整列位置）

Float（フロート）

Position（配置方法）

Screenreaders（スクリーンリーダー）

Shadows（ボックスシャドウ）

Sizing（幅・高さ）

Spacing（マージン・パディング）

Text（テキスト）

Vertical alignment（垂直位置）

Visibility（可視性）