テキスト
配置、折り返し、太さなどを制御するための一般的なテキストユーティリティのドキュメントと例。
テキストの配置
テキスト配置クラスを使用して、コンポーネントのテキストを簡単に再配置できます。
均等割付のテキスト配置を示すためのプレースホルダーテキスト。あなたは私のために同じことをしてくれますか？ 現実と向き合う時が来ました。私はもはやあなたのミューズではありません。美しいと聞いたわ、あなたが判断して、そして私の女の子たちが投票する。私は自分の内側に不死鳥を感じることができる。天は私たちの愛を妬み、天使たちは上から泣いている。ええ、あなたは私をユートピアに連れて行きます。
<p class="text-justify">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>左、右、中央揃えには、グリッドシステムと同じビューポート幅のブレークポイントを使用するレスポンシブクラスが用意されています。
すべてのビューポートサイズで左揃えのテキスト。
すべてのビューポートサイズで中央揃えのテキスト。
すべてのビューポートサイズで右揃えのテキスト。
SM（小）以上のビューポートサイズで左揃えのテキスト。
MD（中）以上のビューポートサイズで左揃えのテキスト。
LG（大）以上のビューポートサイズで左揃えのテキスト。
XL（特大）以上のビューポートサイズで左揃えのテキスト。
<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-wrapクラスを使用してテキストを折り返します。
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>.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>単語の分割
.text-breakを使用して`word-wrap: break-word`と`word-break: break-word`を設定することにより、長いテキスト文字列がコンポーネントのレイアウトを壊さないようにします。より幅広いブラウザのサポートのために、より一般的な`overflow-wrap`の代わりに`word-wrap`を使用し、フレックスコンテナの問題を回避するために非推奨の`word-break: break-word`を追加します。
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>テキスト変換
テキスト大文字化クラスを使用して、コンポーネント内のテキストを変換します。
小文字のテキスト。
大文字のテキスト。
先頭大文字のテキスト。
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>.text-capitalizeは各単語の最初の文字のみを変更し、他の文字の大文字小文字には影響しないことに注意してください。
フォントの太さと斜体
テキストの太さ（ボールド）をすばやく変更したり、テキストを斜体にしたりします。
太字のテキスト。
より太いテキスト（親要素との相対値）。
標準の太さのテキスト。
細いテキスト。
より細いテキスト（親要素との相対値）。
斜体のテキスト。
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>等幅フォント
.text-monospaceを使用して、選択範囲を等幅フォントスタックに変更します。
これは等幅フォントです
<p class="text-monospace">This is in monospace</p>色のリセット
テキストまたはリンクの色を.text-resetでリセットして、親要素から色を継承するようにします。
ミュートされたテキストとリセットされたリンク。
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>テキスト装飾
.text-decoration-noneクラスを使用してテキスト装飾を削除します。
<a href="#" class="text-decoration-none">Non-underlined link</a>