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>.h1 heading</p>
<p>.h2 heading</p>
<p>.h3 heading</p>
<p>.h4 heading</p>
<p>.h5 heading</p>
<p>.h6 heading</p>
<p>.h1 heading</p> <p>.h2 heading</p> <p>.h3 heading</p> <p>.h4 heading</p> <p>.h5 heading</p> <p>.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>Secondary heading</small>
</h1>
<h2>
  <h2> heading
  <small>Secondary heading</small>
</h2>
<h3>
  <h3> heading
  <small>Secondary heading</small>
</h3>
<h4>
  <h4> heading
  <small>Secondary heading</small>
</h4>
<h5>
  <h5> heading
  <small>Secondary heading</small>
</h5>
<h6>
  <h6> heading
  <small>Secondary heading</small>
</h6>
<h1> <h1> heading <small>Secondary heading</small> </h1> <h2> <h2> heading <small>Secondary heading</small> </h2> <h3> <h3> heading <small>Secondary heading</small> </h3> <h4> <h4> heading <small>Secondary heading</small> </h4> <h5> <h5> heading <small>Secondary heading</small> </h5> <h6> <h6> heading <small>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>Display heading 1</h1>
<h1>Display heading 2</h1>
<h1>Display heading 3</h1>
<h1>Display heading 4</h1>
<h1>Display heading 5</h1>
<h1>Display heading 6</h1>
<h1>Display heading 1</h1> <h1>Display heading 2</h1> <h1>Display heading 3</h1> <h1>Display heading 4</h1> <h1>Display heading 5</h1> <h1>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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
<p>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>Highlighted text.</span></p>
<p><span>Fine print.</span></p>
<p><span>Underlined text.</span></p>
<p><span>Text that is incorrect.</span></p>
<p><span>Highlighted text.</span></p> <p><span>Fine print.</span></p> <p><span>Underlined text.</span></p> <p><span>Text that is incorrect.</span></p>

Abbreviations

attr

html

<p><abbr>attr</abbr></p>
<p><abbr>html</abbr></p>
<p><abbr>attr</abbr></p> <p><abbr>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>
  <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>
    <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>Author name in <cite>Source Title</cite></figcaption>
</figure>
<h4 class="h5 text-muted mt-3">Alignment</h4>
<figure>
  <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>Author name in <cite>Source Title</cite></figcaption>
</figure>
<figure>
  <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>Author name in <cite>Source Title</cite></figcaption>
</figure>
<h4 class="h5 text-muted mt-3">Default</h4> <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> <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>Author name in <cite>Source Title</cite></figcaption> </figure> <h4 class="h5 text-muted mt-3">Alignment</h4> <figure> <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>Author name in <cite>Source Title</cite></figcaption> </figure> <figure> <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>Author name in <cite>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>
  <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>
  <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>
<h4 class="h5 text-muted mt-3">Ordered lists</h4>
<ol>
  <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>
  <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>
<h4 class="h5 text-muted mt-3">Unordered lists</h4> <ul> <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> <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> <h4 class="h5 text-muted mt-3">Ordered lists</h4> <ol> <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> <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>

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>
  <li>First inline item</li>
  <li>Second inline item</li>
  <li>Third inline item</li>
</ul>
<h4 class="h5 text-muted mt-3">Ordered lists</h4>
<ol>
  <li>First inline item</li>
  <li>Second inline item</li>
  <li>Third inline item</li>
</ol>
<h4 class="h5 text-muted mt-3">Unordered lists</h4> <ul> <li>First inline item</li> <li>Second inline item</li> <li>Third inline item</li> </ul> <h4 class="h5 text-muted mt-3">Ordered lists</h4> <ol> <li>First inline item</li> <li>Second inline item</li> <li>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>
  <dt>Term</dt>
  <dd>Description</dd>
  <dt>Very long and truncated term</dt>
  <dd>Description</dd>
  <dt>Term</dt>
  <dd>
    <dl>
      <dt>Nested term</dt>
      <dd>Nested description</dd>
      <dt>Very long and truncated term</dt>
      <dd>Nested description</dd>
    </dl>
  </dd>
</dl>
<dl> <dt>Term</dt> <dd>Description</dd> <dt>Very long and truncated term</dt> <dd>Description</dd> <dt>Term</dt> <dd> <dl> <dt>Nested term</dt> <dd>Nested description</dd> <dt>Very long and truncated term</dt> <dd>Nested description</dd> </dl> </dd> </dl>