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

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

テキストユーティリティ（Text） v4.0.0設定変更v4.2.1追加

整列、折り返し、太さなどを制御する一般的なテキストユーティリティの解説と例。

※HTML5のインライン要素による文字の装飾については文字の体裁に掲載。

文字の配置（Text alignment）

文字をテキスト配置クラスでコンポーネントに簡単に配置させる。

文字の均等割付

見本

Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.

※通常の文章（参考）

Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.

設定例
<p class="text-justify">...</p>

【設定】

  • 設定したいテキストに .text-justify（text-align: justify）を入れる

文字の左寄せ/右寄せ/中央揃え v4.0.0設定変更

左揃え、右揃え、中央揃えの場合は、グリッドシステムと同じビューポート幅のブレークポイントを使用するレスポンシブ・クラスが使用可能。

定義済クラスの種類

●文字の左寄せ（text-align: left）

.text-left：全てのビューポートサイズで左寄せ

.text-sm-left：ビューポートサイズ小以上で左寄せ

.text-md-left：ビューポートサイズ中以上で左寄せ

.text-lg-left：ビューポートサイズ大以上で左寄せ

.text-xl-left：ビューポートサイズ特大以上で左寄せ

●文字の中央揃え（text-align: center）

.text-center：全てのビューポートサイズで中央揃え

.text-sm-center：ビューポートサイズ小以上で中央揃え

.text-md-center：ビューポートサイズ中以上で中央揃え

.text-lg-center：ビューポートサイズ大以上で中央揃え

.text-xl-center：ビューポートサイズ特大以上で中央揃え

●文字の右寄せ（text-align: right）

.text-right：全てのビューポートサイズで右寄せ

.text-sm-right：ビューポートサイズ小以上で右寄せ

.text-md-right：ビューポートサイズ中以上で右寄せ

.text-lg-right：ビューポートサイズ大以上で右寄せ

.text-xl-right：ビューポートサイズ特大以上で右寄せ

設定例
<p class="text-right">...</p>

【設定】

  • テキストに .text(-{breakpoint})-{side}（上記の「定義済クラスの種類」から選択）を入れる
    • {breakpoint}（sm（小）, md（中）, lg（大）, xl（特大）のいずれかを選択）は、グリッド・システムのビューポイントに準ずる
    • {side} は、left（左）、right（右）、center（中央揃え） のいずれかを選択

【注意】

【変更履歴】

  • 【v4.0.0】
    • .text-left ⇒ .text(-{breakpoint})-left（従来の .text-left は、そのまま使用可）
    • .text-center ⇒ .text(-{breakpoint})-center（従来の .text-center は、そのまま使用可）
    • .text-right ⇒ .text(-{breakpoint})-right（従来の .text-right は、そのまま使用可）

 

テキストの折り返しとはみ出し（Text wrapping and overflow）v4.2.1一部追加

テキストの折り返し

テキストを .text-wrap クラスで囲む。

見本

●.text-wrap ありの場合 v4.2.1追加

このテキストは折り返す必要がある。

※.text-wrap なしの場合（参考）

このテキストは折り返す必要がある。
設定例
<div class="badge badge-primary text-wrap" style="width: 6rem;">
	このテキストは折り返す必要がある。
</div>

【設定】

  • 設定したい要素に .text-wrap（white-space: normal;）を入れる
  • 幅の広さが決まっている場合のバッジの設定などで便利

.text-nowrap クラスで、テキストが折り返されないようにする。

見本
折り返したくない文字をココに入れると、ハミ出してしまいます。
設定例 見やすいよう枠と色を付けています
<div class="text-nowrap" style="width: 8rem;">
	折り返したくない文字をココに入れると、ハミ出してしまいます。
</div>

【設定】

テキストの省略

より長いコンテンツの場合は、.text-truncate クラスを追加してテキストを省略記号で切り捨てることが可能。display: inline-block または display: block が必要。

見本

●ブロックレベル

これはダミーです。これはダミーです。

●インラインレベル

これはダミーです。これはダミーです。
設定例
ブロックレベル<div class="row">
	<div class="col-2 text-truncate">
		これはダミーです。これはダミーです。
	</div>
</div>
インラインレベル<span class="d-inline-block text-truncate" style="max-width: 150px;">
	これはダミーです。これはダミーです。
</span>

【設定】

 

単語の改行（Word break）v4.3.0新設、v4.5.1プロパティ変更

.text-break を使用して word-wrap: break-word と word-break: break-word を設定することにより、長いテキスト文字列がコンポーネントのレイアウトを壊さないようにする。より幅広いブラウザのサポートをするため、より一般的な overflow-wrap の代わりに word-wrap を使用し、非推奨の word-break: break-word を追加して、フレックスコンテナの問題を回避。

見本

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

※設定がない場合（参考）※画面からはみ出す部分は非表示にしています

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

設定例
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

【設定】

  • 長い英単語を端に来たら途中でも改行するようにしたい場合は、.text-break（word-wrap: break-word, word-break: break-word）を入れる

【変更履歴】

  • 【v4.5.0】
    • スタイル設定が word-break: break-word, overflow-wrap：break-word から word-wrap：break-word に変更（word-wrap の方が幅広いブラウザからサポートされているため）
  • 【v4.5.1】
    • スタイル設定にv4.5.0で外された word-break: break-word を再設定

 

文字の変換（Text transform）

文字の大文字小文字のクラスを使用してコンポーネント内の文字を変換。

.text-capitalize がどのようにして各単語の最初の文字だけを変更するかに注意すること。他の文字の場合は影響を受けない。

変換の種類

●すべて小文字（text-transform: lowercase）：.text-lowercase

Lowercased Text.

●すべて大文字（text-transform: uppercase）：.text-uppercase

Uppercased text.

●最初の文字が小文字⇒大文字（text-transform: capitalize）：.text-capitalize

capitalized text.

設定例
すべて小文字<p class="text-lowercase">Lowercased Text.</p>
すべて大文字<p class="text-uppercase">Uppercased text.</p>
最初の文字が小文字⇒大文字<p class="text-capitalize">capitalized text.</p>

【設定】

  • テキストに .text-{transform}（上記の「変換の種類」から選択）を入れる

【注意】

  • テキストが英文字のみ適用

 

文字の太さとイタリック体（Font weight and italics）v4.0.0新設、v4.2.1一部追加

テキストの太さ（太字）やテキストをイタリック体にすばやく変更可能。

字体の種類

●太めの文字（font-weight: 700）：.font-weight-bold

Bold text.

●より太めの文字（font-weight: bolder）：.font-weight-bolder v4.2.1追加

Bolder weight text. (※親要素に対して)

●通常の太さの文字（font-weight: 400）：.font-weight-normal

Normal weight text.

●細めの文字（font-weight: 300）：.font-weight-light

Light weight text.

●より細めの文字（font-weight: lighter）：.font-weight-lighter v4.2.1追加

Lighter weight text. (※親要素に対して)

●イタリック体（font-style: italic）：.font-italic

Italicized text.

設定例
太めの文字<p class="font-weight-bold">Bold text.</p>
より太めの文字<p class="font-weight-bolder">Bolder weight text.</p>
通常の太さの文字<p><strong class="font-weight-normal">Normal weight text.</strong></p>
細めの文字<p class="font-weight-light">Light weight text.</p>
より細めの文字<p class="font-weight-lighter">Lighter weight text.</p>
イタリック体<p class="font-italic">Italicized text.</p>

【設定】

  • テキストに .font-{weight}（上記の「字体の種類」から選択）を入れる

【注意】

  • イタリック体はブラウザによっては123やabcなど英数字のみ適用

【変更履歴】

  • 【v4.2.1】
    • .font-weight-lighter と .font-weight-bolder が追加

 

等幅フォント（Monospace）v4.1.0新設

.text-monospace を使って等幅フォントスタック（font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;）に選択変更可能。

見本

This is in monospace
日本語の場合

※参考（通常のフォント）

This is in monospace
日本語の場合

設定例
<p class="text-monospace">This is in monospace<br>日本語の場合</p>

【設定】

  • 等幅フォントにしたい要素に .text-monospace を入れる

 

色の継承（Reset color）v4.2.1新設

テキストやリンクの色を .text-reset でリセットし、親要素から色を継承。

見本

リンクの色をリセットしたミュート色のテキスト。

※通常（参考）

リンクの色をリセットしないミュート色のテキスト。

設定例
<p class="text-muted">
	<a href="#" class="text-reset">リンクの色をリセットした</a>ミュート色のテキスト。
</p>

【設定】

  • リンクなどの色を親要素の文字色と同じ（color: inherit）にしたい部分に .text-reset を入れる

 

テキストの装飾線を削除（Text decoration）v4.2.1新設

.text-decoration-none クラスを使用してテキストの装飾線を削除。

見本
下線の付いていないリンク
設定例
<a href="#" class="text-decoration-none">下線の付いていないリンク</a>

【設定】

  • <a> に .text-decoration-none を入れるとリンクにカーセルを合わせても下線が表示されない

ページ移動