Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Small text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

You may alternatively use an inline element with .small in place of any <small>.

<small>This line of text is meant to be treated as fine print.</small>

Bold

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

<strong>rendered as bold text</strong>

Italics

For emphasizing a snippet of text with italics.

<em>rendered as italicized text</em>

Alignment classes

Easily realign text to components with text alignment classes.

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

Addresses

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

Blockquotes

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Lists

Unordered

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

<ul>
  <li>...</li>
</ul>

Ordered

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

<ol>
  <li>...</li>
</ol>

Unstyled

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>

Tables

Basic example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

<table class="table">
  ...
</table>

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

<table class="table table-striped">
  ...
</table>

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

<table class="table table-bordered">
  ...
</table>

Hover rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

<table class="table table-hover">
  ...
</table>

Condensed table

Add .table-condensed to make tables more compact by cutting cell padding in half.

<table class="table table-condensed">
  ...
</table>

Contextual classes

Use contextual classes to color table rows or individual cells.

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>