PRIMARY PAGE HEADER

Type

Headings

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading

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>

<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>

Make a "sub-heading" with the small tag or the .small class.

Main heading A sub-heading

<h3>
    Main heading
    <small class="text-muted">A sub-heading</small>
</h3>

Font size

The .small class does the same thing as the small tag

Regular text

Regular text

Small text

Small text 
<p>Regular text</p>
<p class="font-size-base">Regular text</p>
<p class="small">Small text</p>
<small>Small text</small>

Mark

The .mark class does the same thing as the mark tag

This is a text with some highlighted text.

This is a text with some highlighted text.

<p>This is a text with some <span class="mark">highlighted</span> text.</p>
<p>This is a text with some <mark>highlighted</mark> text.</p>

Lists, unstyled

  • List item 1
  • List item 2
    • List item 3
    • List item 4
  • List item 5
  • List item 6
<ul class="list-unstyled">
    <li>List item 1</li>
    <li>List item 2</li>
    <ul>
        <li>List item 3</li>
        <li>List item 4</li>
    </ul>
    <li>List item 5</li>
    <li>List item 6</li>
</ul>

Lists, inline

  • List item 1
  • List item 2
  • List item 3
  • List item 4
<ul class="list-inline">
    <li class="list-inline-item">List item 1</li>
    <li class="list-inline-item">List item 2</li>
    <li class="list-inline-item">List item 3</li>
    <li class="list-inline-item">List item 4</li>
</ul>

Description list

Description lists
A description list is perfect for defining terms.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
<dl class="row">
    <dt class="col-sm-3">Description lists</dt>
    <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

    <dt class="col-sm-3">Euismod</dt>
    <dd class="col-sm-9">
        <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
        <p>Donec id elit non mi porta gravida at eget metus.</p>
    </dd>

    <dt class="col-sm-3">Malesuada porta</dt>
    <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

    <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
    <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

    <dt class="col-sm-3">Nesting</dt>
    <dd class="col-sm-9">
        <dl class="row">
            <dt class="col-sm-4">Nested definition list</dt>
            <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
        </dl>
    </dd>
</dl>