Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
Heading elementsHeading classesSecondary headingsDisplay headingsLead paragraphInline elementsInline styles using classesAbbreviationsBlockquotesUnstyled listsInline listsDescription lists

Typography

Heading elements

<h1> heading

<h2> heading

<h3> heading

<h4> heading

<h5> heading
<h6> heading
<h1><h1> heading</h1>
<h2><h2> heading</h2>
<h3><h3> heading</h3>
<h4><h4> heading</h4>
<h5><h5> heading</h5>
<h6><h6> heading</h6>
<h1><h1> heading</h1> <h2><h2> heading</h2> <h3><h3> heading</h3> <h4><h4> heading</h4> <h5><h5> heading</h5> <h6><h6> heading</h6>

Heading classes

.h1 heading

.h2 heading

.h3 heading

.h4 heading

.h5 heading

.h6 heading

<p class="h1">.h1 heading</p>
<p class="h2">.h2 heading</p>
<p class="h3">.h3 heading</p>
<p class="h4">.h4 heading</p>
<p class="h5">.h5 heading</p>
<p class="h6">.h6 heading</p>
<p class="h1">.h1 heading</p> <p class="h2">.h2 heading</p> <p class="h3">.h3 heading</p> <p class="h4">.h4 heading</p> <p class="h5">.h5 heading</p> <p class="h6">.h6 heading</p>

Secondary headings

<h1> heading Secondary heading

<h2> heading Secondary heading

<h3> heading Secondary heading

<h4> heading Secondary heading

<h5> heading Secondary heading
<h6> heading Secondary heading 
<h1>
  <h1> heading
  <small class="text-muted">Secondary heading</small>
</h1>
<h2>
  <h2> heading
  <small class="text-muted">Secondary heading</small>
</h2>
<h3>
  <h3> heading
  <small class="text-muted">Secondary heading</small>
</h3>
<h4>
  <h4> heading
  <small class="text-muted">Secondary heading</small>
</h4>
<h5>
  <h5> heading
  <small class="text-muted">Secondary heading</small>
</h5>
<h6>
  <h6> heading
  <small class="text-muted">Secondary heading</small>
</h6>
<h1> <h1> heading <small class="text-muted">Secondary heading</small> </h1> <h2> <h2> heading <small class="text-muted">Secondary heading</small> </h2> <h3> <h3> heading <small class="text-muted">Secondary heading</small> </h3> <h4> <h4> heading <small class="text-muted">Secondary heading</small> </h4> <h5> <h5> heading <small class="text-muted">Secondary heading</small> </h5> <h6> <h6> heading <small class="text-muted">Secondary heading</small> </h6>

Display headings

Display heading 1

Display heading 2

Display heading 3

Display heading 4

Display heading 5

Display heading 6

<h1 class="display-1">Display heading 1</h1>
<h1 class="display-2">Display heading 2</h1>
<h1 class="display-3">Display heading 3</h1>
<h1 class="display-4">Display heading 4</h1>
<h1 class="display-5">Display heading 5</h1>
<h1 class="display-6">Display heading 6</h1>
<h1 class="display-1">Display heading 1</h1> <h1 class="display-2">Display heading 2</h1> <h1 class="display-3">Display heading 3</h1> <h1 class="display-4">Display heading 4</h1> <h1 class="display-5">Display heading 5</h1> <h1 class="display-6">Display heading 6</h1>

Lead paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.

<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>

Inline elements

Highlighted text.

Deleted text.

Text that is incorrect.

Inserted text.

Underlined text.

Fine print.

Strong text.

Emphasized text.

Bold text.

Alternate voice, technical term etc.

<p><mark>Highlighted text.</mark></p>
<p><del>Deleted text.</del></p>
<p><s>Text that is incorrect.</s></p>
<p><ins>Inserted text.</ins></p>
<p><u>Underlined text.</u></p>
<p><small>Fine print.</small></p>
<p><strong>Strong text.</strong></p>
<p><em>Emphasized text.</em></p>
<p><b>Bold text.</b></p>
<p><i>Alternate voice, technical term etc.</i></p>
<p><mark>Highlighted text.</mark></p> <p><del>Deleted text.</del></p> <p><s>Text that is incorrect.</s></p> <p><ins>Inserted text.</ins></p> <p><u>Underlined text.</u></p> <p><small>Fine print.</small></p> <p><strong>Strong text.</strong></p> <p><em>Emphasized text.</em></p> <p><b>Bold text.</b></p> <p><i>Alternate voice, technical term etc.</i></p>

Inline styles using classes

Highlighted text.

Fine print.

Underlined text.

Text that is incorrect.

<p><span class="mark">Highlighted text.</span></p>
<p><span class="small">Fine print.</span></p>
<p><span class="text-decoration-underline">Underlined text.</span></p>
<p><span class="text-decoration-line-through">Text that is incorrect.</span></p>
<p><span class="mark">Highlighted text.</span></p> <p><span class="small">Fine print.</span></p> <p><span class="text-decoration-underline">Underlined text.</span></p> <p><span class="text-decoration-line-through">Text that is incorrect.</span></p>

Abbreviations

attr

html

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">html</abbr></p>
<p><abbr title="attribute">attr</abbr></p> <p><abbr title="HyperText Markup Language" class="initialism">html</abbr></p>

Blockquotes

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.

Attribution

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.

Author name in Source Title

Alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.

Author name in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.

Author name in Source Title
<h4 class="h5 text-muted mt-3">Default</h4>
<blockquote class="blockquote">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
</blockquote>
<h4 class="h5 text-muted mt-3">Attribution</h4>
<figure>
  <blockquote class="blockquote">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
  </blockquote>
  <figcaption class="blockquote-footer">Author name in <cite title="Source Title">Source Title</cite></figcaption>
</figure>
<h4 class="h5 text-muted mt-3">Alignment</h4>
<figure class="text-center">
  <blockquote class="blockquote">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
  </blockquote>
  <figcaption class="blockquote-footer">Author name in <cite title="Source Title">Source Title</cite></figcaption>
</figure>
<figure class="text-end">
  <blockquote class="blockquote">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
  </blockquote>
  <figcaption class="blockquote-footer">Author name in <cite title="Source Title">Source Title</cite></figcaption>
</figure>
<h4 class="h5 text-muted mt-3">Default</h4> <blockquote class="blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p> </blockquote> <h4 class="h5 text-muted mt-3">Attribution</h4> <figure> <blockquote class="blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p> </blockquote> <figcaption class="blockquote-footer">Author name in <cite title="Source Title">Source Title</cite></figcaption> </figure> <h4 class="h5 text-muted mt-3">Alignment</h4> <figure class="text-center"> <blockquote class="blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p> </blockquote> <figcaption class="blockquote-footer">Author name in <cite title="Source Title">Source Title</cite></figcaption> </figure> <figure class="text-end"> <blockquote class="blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p> </blockquote> <figcaption class="blockquote-footer">Author name in <cite title="Source Title">Source Title</cite></figcaption> </figure>

Unstyled lists

Unordered lists

  • First item
  • Second item
  • Third item
  • Sub-items:
    • First sub-item
    • Second sub-item
    • Third sub-item
  • First item
  • Second item
  • Third item
  • Sub-items:
    • First sub-item
    • Second sub-item
    • Third sub-item

Ordered lists

  1. First item
  2. Second item
  3. Third item
  4. Sub-items:
    1. First sub-item
    2. Second sub-item
    3. Third sub-item
  1. First item
  2. Second item
  3. Third item
  4. Sub-items:
    1. First sub-item
    2. Second sub-item
    3. Third sub-item
<h4 class="h5 text-muted mt-3">Unordered lists</h4>
<ul class="list-unstyled">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Sub-items:
    <ul>
      <li>First sub-item</li>
      <li>Second sub-item</li>
      <li>Third sub-item</li>
    </ul>
  </li>
</ul>
<ul class="list-unstyled">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Sub-items:
    <ul class="list-unstyled">
      <li>First sub-item</li>
      <li>Second sub-item</li>
      <li>Third sub-item</li>
    </ul>
  </li>
</ul>
<h4 class="h5 text-muted mt-3">Ordered lists</h4>
<ol class="list-unstyled">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Sub-items:
    <ol>
      <li>First sub-item</li>
      <li>Second sub-item</li>
      <li>Third sub-item</li>
    </ol>
  </li>
</ol>
<ol class="list-unstyled">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Sub-items:
    <ol class="list-unstyled">
      <li>First sub-item</li>
      <li>Second sub-item</li>
      <li>Third sub-item</li>
    </ol>
  </li>
</ol>
<h4 class="h5 text-muted mt-3">Unordered lists</h4> <ul class="list-unstyled"> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Sub-items: <ul> <li>First sub-item</li> <li>Second sub-item</li> <li>Third sub-item</li> </ul> </li> </ul> <ul class="list-unstyled"> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Sub-items: <ul class="list-unstyled"> <li>First sub-item</li> <li>Second sub-item</li> <li>Third sub-item</li> </ul> </li> </ul> <h4 class="h5 text-muted mt-3">Ordered lists</h4> <ol class="list-unstyled"> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Sub-items: <ol> <li>First sub-item</li> <li>Second sub-item</li> <li>Third sub-item</li> </ol> </li> </ol> <ol class="list-unstyled"> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Sub-items: <ol class="list-unstyled"> <li>First sub-item</li> <li>Second sub-item</li> <li>Third sub-item</li> </ol> </li> </ol>

Inline lists

Unordered lists

  • First inline item
  • Second inline item
  • Third inline item

Ordered lists

  1. First inline item
  2. Second inline item
  3. Third inline item
<h4 class="h5 text-muted mt-3">Unordered lists</h4>
<ul class="list-inline">
  <li class="list-inline-item">First inline item</li>
  <li class="list-inline-item">Second inline item</li>
  <li class="list-inline-item">Third inline item</li>
</ul>
<h4 class="h5 text-muted mt-3">Ordered lists</h4>
<ol class="list-inline">
  <li class="list-inline-item">First inline item</li>
  <li class="list-inline-item">Second inline item</li>
  <li class="list-inline-item">Third inline item</li>
</ol>
<h4 class="h5 text-muted mt-3">Unordered lists</h4> <ul class="list-inline"> <li class="list-inline-item">First inline item</li> <li class="list-inline-item">Second inline item</li> <li class="list-inline-item">Third inline item</li> </ul> <h4 class="h5 text-muted mt-3">Ordered lists</h4> <ol class="list-inline"> <li class="list-inline-item">First inline item</li> <li class="list-inline-item">Second inline item</li> <li class="list-inline-item">Third inline item</li> </ol>

Description lists

Term
Description
Very long and truncated term
Description
Term
Nested term
Nested description
Very long and truncated term
Nested description
<dl class="row">
  <dt class="col-md-3">Term</dt>
  <dd class="col-md-9">Description</dd>
  <dt class="col-md-3 text-truncate">Very long and truncated term</dt>
  <dd class="col-md-9">Description</dd>
  <dt class="col-md-3">Term</dt>
  <dd class="col-md-9">
    <dl class="row">
      <dt class="col-md-4">Nested term</dt>
      <dd class="col-md-8">Nested description</dd>
      <dt class="col-md-4 text-truncate">Very long and truncated term</dt>
      <dd class="col-md-8">Nested description</dd>
    </dl>
  </dd>
</dl>
<dl class="row"> <dt class="col-md-3">Term</dt> <dd class="col-md-9">Description</dd> <dt class="col-md-3 text-truncate">Very long and truncated term</dt> <dd class="col-md-9">Description</dd> <dt class="col-md-3">Term</dt> <dd class="col-md-9"> <dl class="row"> <dt class="col-md-4">Nested term</dt> <dd class="col-md-8">Nested description</dd> <dt class="col-md-4 text-truncate">Very long and truncated term</dt> <dd class="col-md-8">Nested description</dd> </dl> </dd> </dl>