Body Text

Body copy, text wrapped in a simple <p> tag, lays the foundation for all other text attributes and elements. Every element of body copy, and really any text, is definable by canvas.

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource sucking relationships via premier niche markets.

<p>
  Collaboratively administrate empowered…
</p>

<p>
  Efficiently unleash cross-media information…
</p>

Lead Text

Increase the importance of your body copy by adding the class .lead. Lead is only a class, and not an HTML tag, but may be useful when you want to retain the semantic nature of a paragraph, but are not willing to classify it as a heading.

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource sucking relationships via premier niche markets.

<p class="lead">
  Collaboratively administrate empowered…
</p>

<p>
  Efficiently unleash cross-media information…
</p>

Small Text

For less important body text, add the class .small. Small text is useful for legal fine-print, instructional text, or supporting details.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource sucking relationships via premier niche markets.

Collaboratively administrate empowered markets via plug-and-play networks.

<p>
  Collaboratively administrate empowered…
</p>

<p class="small">
  Efficiently unleash cross-media information…
</p>

Headings

All standard HTML heading tags from <h1> through <h5> are available. In addition the class .h1 through .h5 classes are available, for when you want to match the font styling of a heading but don’t want to adjust the tag.

h1 Heading Text h2 Heading Text h3 Heading Text h4 Heading Text h5 Heading Text h6 Heading Text
<h1>
  h1 Heading Text
</h1>

<h2>
  h2 Heading Text
</h2>

<h3>
  h3 Heading Text
</h3>

<h4>
  h4 Heading Text
</h4>

<h5>
  h5 Heading Text
</h5>

<h6>
  h6 Heading Text
</h6>

Inline Styling

For all text elements, classes are made available to adjust the styling inline. For example, increase the emphasis of text to convey importance.

Emphasis

When you want to emphasis the importance the text, use the class .emphasis. All text included text elements – headings, body text, lead – had added support for emphasized text.

Heading with emphasized text

Quickly maximize timely deliverables for deliverables without functional solutions.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource sucking relationships via premier niche markets.

<h1 class="flush-top">
  Heading with <span class="emphasis">emphasized</span> text
</h1>

<p class="lead">
  Quickly <span class="emphasis">maximize</span> timely…
</p>

<p class="flush-bottom">
  Efficiently unleash <span class="emphasis">cross-media</span> inf…
</p>

Muted

When you want to demphasis the importance text, use the class .muted. All text included text elements – headings, body text, lead – had added support for muted text.

Heading with muted text

Quickly maximize timely deliverables for deliverables without functional solutions.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource sucking relationships via premier niche markets.

<h1 class="flush-top">
  Heading with <span class="muted">muted</span> text
</h1>

<p class="lead">
  Quickly <span class="muted">maximize</span> timely…
</p>

<p class="flush-bottom">
  Efficiently unleash <span class="muted">cross-media</span> inf…
</p>

Inverse Styling

All typographic elements have support for inverted styling. This is useful when text is resting on a dark background. Add the class .inverse to any text element to leverage the inverted styling.

The inverse styling even has added support for the .emphasis and .muted inline styling classes.

h1 Heading Text h2 Heading Text h3 Heading Text h4 Heading Text h5 Heading Text h6 Heading Text

Dramatically visualize customer directed convergence without revolutionary ROI.

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource sucking relationships via premier niche markets.

<h1 class="inverse">
  h1 Heading Text
</h1>

<p class="lead inverse">
  Dramatically visualize <span class="emphasis">emphasized</span> directed…
</p>

<p class="inverse">
  Collaboratively administrate empowered…
</p>

<p class="inverse">
  Efficiently unleash <span class="muted">cross-media</span> information…
</p>

Alignment

Align text using the supplied alignment classes. By default text is aligned left.

Left aligned text. Cartibulum ercisco buglossa montepessulanus bicrotum cosidero auricolor menda boo bubo pernot io anilis lento infrequens cit circumvolutor crux. Congregalis chrysoprassos vanesco carptor galbanus veles septimpliciter corripio assuo bua arferia?

Center aligned text. Cartibulum ercisco buglossa montepessulanus bicrotum cosidero auricolor menda boo bubo pernot io anilis lento infrequens cit circumvolutor crux. Congregalis chrysoprassos vanesco carptor galbanus veles septimpliciter corripio assuo bua arferia?

Right aligned text. Cartibulum ercisco buglossa montepessulanus bicrotum cosidero auricolor menda boo bubo pernot io anilis lento infrequens cit circumvolutor crux. Congregalis chrysoprassos vanesco carptor galbanus veles septimpliciter corripio assuo bua arferia?

Justify aligned text. Cartibulum ercisco buglossa montepessulanus bicrotum cosidero auricolor menda boo bubo pernot io anilis lento infrequens cit circumvolutor crux. Congregalis chrysoprassos vanesco carptor galbanus veles septimpliciter corripio assuo bua arferia?

No wrap text. Cartibulum ercisco buglossa montepessulanus bicrotum cosidero auricolor menda boo bubo pernot io anilis lento infrequens cit circumvolutor crux. Congregalis chrysoprassos vanesco carptor galbanus veles septimpliciter corripio assuo bua arferia?

<p class="text-align-left">
  Left aligned text.
</p>

<p class="text-align-center">
  Center aligned text.
</p>

<p class="text-align-right">
  Right aligned text.
</p>

<p class="text-align-justify">
  Justify aligned text.
</p>

<p class="text-align-nowrap">
  No wrap text.
</p>

Transformation

Transform text in components with text capitalization classes.

Uppercase text

Lowercase text.

Capitalized text.

<p class="text-uppercase">
  Uppercase text
</p>

<p class="text-lowercase">
  Lowercase text.
</p>

<p class="text-capitalize">
  Capitalized text.
</p>

Lists

Align text using the supplied alignment classes. By default text is aligned left.

Ordered Lists

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li></li>
</ol>

Unordered Lists

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li></li>
</ul>

Unstyled Lists

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li></li>
</ul>

Inline Lists

Display list <li> inline rather than vertical stacked using the class .list-inline on any <ul> or <ol>.

  • List item
  • List item
  • List item
  • List item
  • List item
<ul class="list-inline">
  <li></li>
</ul>