Headings

h1. Bootstrap heading (36px)

h2. Bootstrap heading (30px)

h3. Bootstrap heading (24px)

h4. Bootstrap heading (18px)

h5. Bootstrap heading (14px)
h6. Bootstrap heading (12px)
Headings – Code View

<!-- Headings -->
<div class="card">
    <h5 class="card-header">Headings</h5>
    <div class="card-body">
        <h1>h1. Bootstrap heading (36px)</h1>
        <h2>h2. Bootstrap heading (30px)</h2>
        <h3>h3. Bootstrap heading (24px)</h3>
        <h4>h4. Bootstrap heading (18px)</h4>
        <h5>h5. Bootstrap heading (14px)</h5>
        <h6>h6. Bootstrap heading (12px)</h6>
    </div>
</div>
<!-- /Headings -->
Display headings

Display 1 (80px)

Display 2 (72px)

Display 3 (64px)

Display 4 (56px)

Display 5 (48px)

Display 6 (40px)

Display Headings – Code View

<!-- Display Headings -->
<div class="card">
    <h5 class="card-header">Display headings</h5>
    <div class="card-body">
        <h1 class="display-1">Display 1 (80px)</h1>
        <h1 class="display-2">Display 2 (72px)</h1>
        <h1 class="display-3">Display 3 (64px)</h1>
        <h1 class="display-4">Display 4 (56px)</h1>
        <h1 class="display-5">Display 5 (48px)</h1>
        <h1 class="display-6">Display 6 (40px)</h1>
    </div>
</div>
<!-- /Display Headings -->
Text Elements
Text Highlight

You can use the mark tag to highlight text.
Deleted Text

This line of text is meant to be treated as deleted text.
No Longer Correct

This line of text is meant to be treated as no longer accurate.
Addition

This line of text is meant to be treated as an addition to the document.

Underlined

This line of text will render as underlined
Fine Print

This line of text is meant to be treated as fine print.
Bold Text

This line rendered as bold text.
Italicized Text

This line rendered as italicized text.
Abbreviations

attr

HTML
Muted text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Text Elements – Code View 

<div class="col">
  <div class="card">
    <h5 class="card-header">Text Elements</h5>
    <div class="card-body">
      <table class="table table-borderless">
        <tbody>

          <tr>
            <td class="align-middle"><small class="text-light fw-medium">Text Highlight</small></td>
            <td class="py-4">
              <p class="mb-0">You can use the mark tag to <mark>highlight</mark> text.</p>
            </td>
          </tr>

          <tr>
            <td class="align-middle"><small class="text-light fw-medium">Deleted Text</small></td>
            <td class="py-4">
              <p class="mb-0"><del>This line of text is meant to be treated as deleted text.</del></p>
            </td>
          </tr>

          <tr>
            <td><small class="text-light fw-medium">No Longer Correct</small></td>
            <td class="py-4">
              <p class="mb-0"><s>This line of text is meant to be treated as no longer accurate.</s></p>
            </td>
          </tr>

          <tr>
            <td><small class="text-light fw-medium">Addition</small></td>
            <td class="py-4">
              <p class="mb-0">
                <ins>This line of text is meant to be treated as an addition to the document.</ins>
              </p>
            </td>
          </tr>

          <tr>
            <td><small class="text-light fw-medium">Underlined</small></td>
            <td class="py-4">
              <p class="mb-0"><u>This line of text will render as underlined</u></p>
            </td>
          </tr>

          <tr>
            <td><small class="text-light fw-medium">Fine Print</small></td>
            <td class="py-4">
              <p class="mb-0"><small>This line of text is meant to be treated as fine print.</small></p>
            </td>
          </tr>

          <tr>
            <td><small class="text-light fw-medium">Bold Text</small></td>
            <td class="py-4">
              <p class="mb-0"><strong>This line rendered as bold text.</strong></p>
            </td>
          </tr>

          <tr>
            <td><small class="text-light fw-medium">Italicized Text</small></td>
            <td class="py-4">
              <p class="mb-0"><em>This line rendered as italicized text.</em></p>
            </td>
          </tr>

          <tr>
            <td><small class="text-light fw-medium">Abbreviations</small></td>
            <td>
              <p><abbr title="attribute">attr</abbr></p>
              <p class="mb-0"><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
            </td>
          </tr>

          <tr>
            <td class="align-middle"><small class="text-light fw-medium">Muted text</small></td>
            <td class="py-4">
              <p class="text-body-secondary mb-0">
                Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
              </p>
            </td>
          </tr>

        </tbody>
      </table>
    </div>
  </div>
</div>