テキストの折り返し
text-wrap
.text-wrap はテキストの自動改行を許可します。
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>text-nowrap
.text-nowrap はテキストの自動改行を禁止します。
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>text-break
.text-break は word-wrap:break-word と word-break:break-word が設定され、長い文字列のレイアウト崩れを防ぎます。
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>大文字・小文字
text-lowercase
.text-lowercase はテキストを小文字にします。
Lowercased text.
<p class="text-lowercase">Lowercased text.</p>text-uppercase
.text-uppercase はテキストを大文字にします。
Uppercased text.
<p class="text-uppercase">Uppercased text.</p>text-capitalize
.text-capitalize は各単語の最初の文字だけを大文字します。
CapiTaliZed text.
<p class="text-capitalize">CapiTaliZed text.</p>文字の太さ・スタイル
テキストの font-weight や font-style を変更できます。 font-style は.fst-*と省略され、 font-weight は .fw-*と省略されます。
fw-bold
.fw-bold は太文字にします。（数値で700を指定した場合と同じ）
Bold text.
<p class="fw-bold">Bold text.</p>fw-bolder
.fw-bolder は相対的に一段階文字を太くします。
Bolder weight text (relative to the parent element).
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>fw-normal
.fw-normal は標準の太さです。（数値で400を指定した場合と同じ）
Normal weight text.
<p class="fw-normal">Normal weight text.</p>fw-light
.fw-light は細文字にします。（数値で300を指定した場合と同じ）
Light weight text.
<p class="fw-light">Light weight text.</p>fw-lighter
.fw-lighter は相対的に一段階文字を細くします。
Lighter weight text (relative to the parent element).
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>fst-italic
.fst-italic はイタリック体フォントで表示します。
Italic text.
<p class="fst-italic">Italic text.</p>fst-normal
.fst-normal は標準フォントで表示します。初期値。
Text with normal font style
<p class="fst-normal">Text with normal font style</p>テキスト省略
text-truncate
.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>