Typography
Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Blockquote reverse

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote-reverse">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Emphasis
Bold text
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<strong>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</strong>
Italics text
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<em>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</em>
Small text
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<small>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</small>
Lists
List inline
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
<ul class="list-inline">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>
List ordered
  1. List Item 1
  2. List Item 2
  3. List Item 3
    • List Item 3.1
    • List Item 3.2
    • List Item 3.3
    • List Item 3.4
  4. List Item 4
<ol>
  <li>List Item 1
    <li>List Item 2</li>
    <li>List Item 3
      <ul>
        <li>List Item 3.1</li>
        <li>List Item 3.2</li>
        <li>List Item 3.3</li>
        <li>List Item 3.4</li>
      </ul>
    </li>
    <li>List Item 4</li>
  </li>
</ol>
List unordered
  • List Item 1
  • List Item 2
  • List Item 3
    • List Item 3.1
    • List Item 3.2
    • List Item 3.3
    • List Item 3.4
  • List Item 4
<ul>
  <li>List Item 1
    <li>List Item 2</li>
    <li>List Item 3
      <ul>
        <li>List Item 3.1</li>
        <li>List Item 3.2</li>
        <li>List Item 3.3</li>
        <li>List Item 3.4</li>
      </ul>
    </li>
    <li>List Item 4</li>
  </li>
</ul>
List unstyled
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
<ul class="list-unstyled">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>
Body copy

Lead paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

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

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

An abbreviation of the word attribute is attr.

<p class="lead">Lead paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est
    non commodo luctus.</p>
<p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis
    parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p>
    <small>This line of text is meant to be treated as fine print.</small>
</p>
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Lead copy

This is an example of a lead paragraph. WinShape Camps offers day and overnight summer camp experiences for boys and girls of all ages.

<p class="lead">This is an example of a lead paragraph. WinShape Camps offers day and overnight summer camp experiences for boys and girls of all ages.</p>
Links
<a href="#">Default link</a>
Text alignment

Left Alignment

Center Alignment

Right Alignment

Justified Text

<p class="text-left">Left Alignment</p>
<p class="text-center">Center Alignment</p>
<p class="text-right">Right Alignment</p>
<p class="text-justify">Justified Text</p>