text-left
text-center
text-right
<p class="text-left">text-left</p>
<p class="text-center">text-center</p>
<p class="text-right">text-right</p>
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>
太字(font-italic)
通常(font-weight-normal)
細字(font-weight-light)
イタリック体(font-italic)
<p class="font-weight-bold">太字(font-italic)</p>
<p class="font-weight-normal">通常(font-weight-normal)</p>
<p class="font-weight-light">細字(font-weight-light)</p>
<p class="font-italic">イタリック体(font-italic)</p>
Bootstrapで、文字を均等割付する。
<p class="text-justify">Bootstrapで、文字を均等割付する。</p>
This is in monospace
日本語の場合
<p class="text-monospace">This is in monospace<br>日本語の場合</p>
This is in monospace
日本語の場合
<p>This is in monospace<br>日本語の場合</p>
Text-Lowercase(すべて小文字)
text-uppercase(すべて大文字)
text-capitalize(最初の文字を大文字)
<p class="text-lowercase">Text-Lowercase(すべて小文字)</p>
<p class="text-uppercase">text-uppercase(すべて大文字)</p>
<p class="text-capitalize">text-capitalize(最初の文字を大文字)</p>
25文字以上は省略されます。25文字以上は省略されます。25文字以上は省略されます。25文字以上は省略されます。
<p class="text-truncate w-25">25文字以上は省略されます。25文字以上は省略されます。25文字以上は省略されます。25文字以上は省略されます。</p>
h1クラスの標準と同じになる
h2クラスの標準と同じになる
h3クラスの標準と同じになる
h4クラスの標準と同じになる
h5クラスの標準と同じになる
h6クラスの標準と同じになる
<p class="h1">h1クラスの標準と同じになる</p>
<p class="h2">h2クラスの標準と同じになる</p>
<p class="h3">h3クラスの標準と同じになる</p>
<p class="h4">h4クラスの標準と同じになる</p>
<p class="h5">h5クラスの標準と同じになる</p>
<p class="h6">h6クラスの標準と同じになる</p>
h3(標準)
h3.display-1
h3.display-2
h3.display-3
h3.display-4
<h3>h3(標準)</h3>
<h3 class="display-1">h3.display-1</h3>
<h3 class="display-2">h3.display-2</h3>
<h3 class="display-3">h3.display-3</h3>
<h3 class="display-4">h3.display-4</h3>
mark要素を使って、テキストをハイライト表示させることができます。
定義済みクラス「.mark」を使用してmark要素とスタイルを一致させることもできます。
<p>mark要素を使って、テキストを<mark>ハイライト表示</mark>させることができます。</p>
<p>定義済みクラス「.mark」を使用して<span class="mark">mark要素とスタイルを一致</span>させることもできます。</p>
「small要素」を使って、テキストを細目・注釈を表すテキストとして小さなサイズで表示させることができます。
「smallクラス」を使用してsmall要素とスタイルを一致させることもできます。
<p><small>「small要素」</small>を使って、テキストを細目・注釈を表すテキストとして小さなサイズで表示させることができます。</p>
<p><span class="small">「smallクラス」</span>を使用してsmall要素とスタイルを一致させることもできます。</p>
strong要素を使って、テキストを重要なテキストとして太字で表示させることができます。
b要素を使ってテキストを強調表示するテキストとして太字で表示させることができます。
<p>strong要素を使って、テキストを<strong>重要なテキスト</strong>として太字で表示させることができます。</p>
<p>b要素を使ってテキストを<b>強調表示するテキスト</b>として太字で表示させることができます。</p>
del要素のデフォルトスタイルを使って、テキストを削除されたテキストとして取り消し線を表示させることができます。
<p>del要素のデフォルトスタイルを使って、テキストを<del>削除されたテキスト</del>として取り消し線を表示させることができます。</p>
em要素のデフォルトスタイルを使って、テキストを強調したいテキスト(Emphasis text)としてイタリック体または斜体で表示させることができます。(ブラウザによっては123やabcなど英数字のみ適用)
<p>em要素のデフォルトスタイルを使って、テキストを<em>強調したいテキスト(Emphasis text)</em>としてイタリック体または斜体で表示させることができます。(ブラウザによっては123やabcなど英数字のみ適用)</p>
u要素のデフォルトスタイルを使って、テキストをラベル付けされたテキストとして下線を表示させることができます。
<p>u要素のデフォルトスタイルを使って、テキストを<u>ラベル付けされたテキスト</u>として下線を表示させることができます。</p>
目立たせたい段落(p.lead)
標準的な段落(p)
<p class="lead">目立たせたい段落(p.lead)</p>
<p>標準的な段落(p)</p>
s要素のデフォルトスタイルを使って、テキストを無効なテキストとして取り消し線を表示させることができます。
<p>s要素のデフォルトスタイルを使って、テキストを<s>無効なテキスト</s>として取り消し線を表示させることができます。</p>
ins要素のデフォルトスタイルを使って、テキストを後から挿入されたテキストとして下線を表示することができます。
<p>ins要素のデフォルトスタイルを使って、テキストを<ins>後から挿入されたテキスト</ins>として下線を表示することができます。</p>
主タイトル キャプチャー 副タイトル(small.text-muted)
<h4>主タイトル <small class="text-muted">キャプチャー 副タイトル(small.text-muted)</small></h4>
<p>サンプルテキスト</p>
<p>2行目のサンプルテキスト</p>
<pre><code>
<p>サンプルテキスト</p>
<p>2行目のサンプルテキスト</p>
</code></pre>
<code>
タグで囲みます。
<div>
インラインのコード表示部分を<code><code></code>タグで囲みます。
</div>
<div>
ディレクトリを切り替えるには、
<kbd>cd</kbd>と続けてディレクトリ名を入力します。設定を編集するには、
<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>を押します。
</div>
<div>
<samp>This text is meant to be treated as sample output from a computer program.</samp>
</div>
<div>
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
</div>
引用文の例を見てみましょう。
基本の引用文です。
<p>引用文の例を見てみましょう。</p>
<blockquote class="blockquote">
<p class="mb-0">基本の引用文です。</p>
</blockquote>
引用文の例を見てみましょう。
基本の引用文です。
<p>引用文の例を見てみましょう。</p>
<blockquote class="blockquote text-center">
<p class="mb-0">基本の引用文です。</p>
<footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
</blockquote>
引用文の例を見てみましょう。
基本の引用文です。
<p>引用文の例を見てみましょう。</p>
<blockquote class="blockquote">
<p class="mb-0">基本の引用文です。</p>
<footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
</blockquote>
引用文の例を見てみましょう。
基本の引用文です。
<p>引用文の例を見てみましょう。</p>
<blockquote class="blockquote text-right">
<p class="mb-0">基本の引用文です。</p>
<footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
</blockquote>
HTML
HTML
<p><abbr title="HyperText Markup Language">HTML</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>