Typography
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>
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>
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>
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>
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>
For all text elements, classes are made available to adjust the styling inline. For example, increase the emphasis of text to convey importance.
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.
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>
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.
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>
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.
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>
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>
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>
Align text using the supplied alignment classes. By default text is aligned left.
A list of items in which the order does explicitly matter.
<ol>
<li>
…
</li>
</ol>
A list of items in which the order does not explicitly matter.
<ul>
<li>
…
</li>
</ul>
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.
<ul class="list-unstyled">
<li>
…
</li>
</ul>
Display list <li>
inline rather than vertical stacked using the class .list-inline
on any <ul>
or <ol>
.
<ul class="list-inline">
<li>
…
</li>
</ul>