Body Copy

Bootstrap’s global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).

<p>...</p>

Emphasis

Use HTML’s default emphasis tags with lightweight styles.

Small

For de-emphasizing inline or blocks of text, use the small tag.

<small>rendered as fine print</small>

Bold

For emphasizing a snippet of text with a heavier font-weight.

<strong>rendered as bold</strong>

Italics

For emphasizing a snippet of text with italics.

<em>rendered as italicized</em>

Headings

All HTML headings, <h1> through <h3> are available.

h1. Heading 1

h2. Heading 2

h3. Heading 3

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>

Size classes

Use style classes to size up/down text corresponding with heading sizes.

.romo-text0

.romo-text1

.romo-text2

.romo-text3

<div class="romo-text0">...</div>
<div class="romo-text1">...</div>
<div class="romo-text2">...</div>
<div class="romo-text3">...</div>

Or, use these natural-size style classes for the more common sizing needs.

.romo-text-small Size (alias for .romo-text0)

normal text Size

.romo-text-large Size (alias for .romo-text2)

<div class="romo-text-small">...</div>
<div>...</div>
<div class="romo-text-large">...</div>

Alignment classes

Use style classes to align text.

.romo-align-left

.romo-align-center

.romo-align-right

<p class="romo-align-left">...</p>
<p class="romo-align-center">...</p>
<p class="romo-align-right">...</p>

Or vertical align text.

Aligned: .romo-align-top

Aligned: .romo-align-middle

Aligned: .romo-align-bottom

<div>
  <span class="romo-align-top romo-text-large">...</span>
  <span class="romo-align-top romo-text-small">...</span>
</div>
<div>
  <span class="romo-align-middle romo-text-large">...</span>
  <span class="romo-align-middle romo-text-small">...</span>
</div>
<div>
  <span class="romo-align-bottom romo-text-large">...</span>
  <span class="romo-align-bottom romo-text-small">...</span>
</div>

Weight classes

Use style classes to set font weight.

.romo-text-normal

.romo-text-lighter

.romo-text-bold

.romo-text-bolder

.romo-text-100

.romo-text-200

.romo-text-300

.romo-text-400

.romo-text-500

.romo-text-600

.romo-text-700

.romo-text-800

.romo-text-900

<div class="romo-text-normal">...</div>
<div class="romo-text-lighter">...</div>
<div class="romo-text-bold">...</div>
<div class="romo-text-bolder">...</div>
<div class="romo-text-100">...</div>
<div class="romo-text-200">...</div>
<div class="romo-text-300">...</div>
<div class="romo-text-400">...</div>
<div class="romo-text-500">...</div>
<div class="romo-text-600">...</div>
<div class="romo-text-700">...</div>
<div class="romo-text-800">...</div>
<div class="romo-text-900">...</div>

Color emphasis classes

Use style classes to add color to text.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<span class="romo-text-muted">...</span><br />
<span class="romo-text-warning">...</span><br />
<span class="romo-text-error">...</span><br />
<span class="romo-text-info">...</span><br />
<span class="romo-text-success">...</span><br />
<span class="romo-text-inverse">...</span><br />

Or, to links.

<a href="#" class="romo-text-muted">...</a><br />
<a href="#" class="romo-text-warning">...</a><br />
<a href="#" class="romo-text-error">...</a><br />
<a href="#" class="romo-text-info">...</a><br />
<a href="#" class="romo-text-success">...</a><br />
<a href="#" class="romo-text-inverse">...</a><br />

Or, on hover only (non-links).

<span class="romo-text-muted-hover">...</span><br />
<span class="romo-text-warning-hover">...</span><br />
<span class="romo-text-error-hover">...</span><br />
<span class="romo-text-info-hover">...</span><br />
<span class="romo-text-success-hover">...</span><br />
<span class="romo-text-inverse-hover">...</span><br />

Or, to the background instead of the text.

<span class="romo-bg-muted">...</span><br />
<span class="romo-bg-warning">...</span><br />
<span class="romo-bg-error">...</span><br />
<span class="romo-bg-info">...</span><br />
<span class="romo-bg-success">...</span><br />
<span class="romo-bg-inverse">...</span><br />

Or, to the background instead of the text on hover only.

<span class="romo-bg-muted-hover">...</span><br />
<span class="romo-bg-warning-hover">...</span><br />
<span class="romo-bg-error-hover">...</span><br />
<span class="romo-bg-info-hover">...</span><br />
<span class="romo-bg-success-hover">...</span><br />
<span class="romo-bg-inverse-hover">...</span><br />

Or, combine in any number of ways.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<span class="romo-text-inverse romo-bg-inverse">...</span><br />
<span class="romo-text-success romo-bg-info">...</span><br />
<span class="romo-text-error romo-bg-warning">...</span><br />
<span class="romo-text-info romo-bg-inverse-hover">...</span><br />
<span class="romo-text-error-hover romo-bg-success-hover">...</span><br />
<a href="#" class="romo-text-inverse romo-bg-inverse">...</a><br />