Text
Text(テキスト)は文字を簡単に配置できます。テキスト ユーティリティの使い方の例を示します。
Text alignment
alignment で簡単にテキストを配置できます。
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>左揃え, 右揃え, 中央揃えの場合は, グリッドシステムと同じブレークポイントを使用するレスポンシブクラスが使用可能です。
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Left aligned text on viewports sized SM (small) or wider.
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
<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>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>Text wrapping and overflow
.text-nowrap クラスで, テキストが折り返されないようにできます。
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>長いコンテンツの場合は, .text-truncate を追加してテキストを省略する事が可能です。display: inline-block または display: block が必要です。
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>Word break
.text-break を使うことでサンプルのように長い文字列の場合にレイアウトが崩れるのを防ぐことができます。
.text-break は overflow-wrap: break-word が適用されています。
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Text transform
文字の大文字や小文字の変換ができます。
Lowercased text.
Uppercased text.
CapiTaliZed text.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>.text-capitalize が各単語の最初の文字だけをどのように変更するかに注意が必要です。
Font weight and italics
太さ（太字）やテキストをイタリック体に変更できます。
Bold text.
Normal weight text.
Light weight text.
Italic text.
<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>Monospace
.text-monospace を使って等幅フォントスタックが選択可能です.
This is in monospace
<p class="text-monospace">This is in monospace</p>Reset color
.text-reset を適用するとテキストやリンクの色をリセットする事ができます。
Muted text with a reset link.
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>v4.3