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. Bootstrap heading
|
Semibold 48px |
h2. Bootstrap heading
|
Semibold 36px |
h3. Bootstrap heading
|
Semibold 30px |
h4. Bootstrap heading
|
Semibold 24px |
h5. Bootstrap heading
|
Semibold 20px |
h6. Bootstrap heading
|
Semibold 16px |
<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. Bootstrap heading Secondary text
|
h2. Bootstrap heading Secondary text
|
h3. Bootstrap heading Secondary text
|
h4. Bootstrap heading Secondary text
|
h5. Bootstrap heading Secondary text
|
h6. Bootstrap heading Secondary text
|
<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>
.
This line of text is meant to be treated as fine print.
<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.
The following snippet of text is rendered as bold text.
<strong>rendered as bold text</strong>
Italics
For emphasizing a snippet of text with italics.
The following snippet of text is rendered as italicized text.
<em>rendered as italicized text</em>
Alternate elements
Feel free to use <b>
and <i>
in HTML5. <b>
is meant to highlight words or phrases without conveying additional importance while <i>
is mostly for voice, technical terms, etc.
Alignment classes
Easily realign text to components with text alignment classes.
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
<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>
.
Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com
<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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote-reverse">
...
</blockquote>
Lists
Unordered
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
Ordered
A list of items in which the order does explicitly matter.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
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.
- 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>
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.
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
<table class="table">
...
</table>
Striped rows
Use .table-striped
to add zebra-striping to any table row within the <tbody>
.
Cross-browser compatibility
Striped tables are styled via the :nth-child
CSS selector, which is not available in Internet Explorer 8.
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
<table class="table table-striped">
...
</table>
Bordered table
Add .table-bordered
for borders on all sides of the table and cells.
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
Mark |
Otto |
@TwBootstrap |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry the Bird |
@twitter |
<table class="table table-bordered">
...
</table>
Hover rows
Add .table-hover
to enable a hover state on table rows within a <tbody>
.
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry the Bird |
@twitter |
<table class="table table-hover">
...
</table>
Condensed table
Add .table-condensed
to make tables more compact by cutting cell padding in half.
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry the Bird |
@twitter |
<table class="table table-condensed">
...
</table>
Contextual classes
Use contextual classes to color table rows or individual cells.
Class |
Description |
.active
|
Applies the hover color to a particular row or cell |
.success
|
Indicates a successful or positive action |
.info
|
Indicates a neutral informative change or action |
.warning
|
Indicates a warning that might need attention |
.danger
|
Indicates a dangerous or potentially negative action |
# |
Column heading |
Column heading |
Column heading |
1 |
Column content |
Column content |
Column content |
2 |
Column content |
Column content |
Column content |
3 |
Column content |
Column content |
Column content |
4 |
Column content |
Column content |
Column content |
5 |
Column content |
Column content |
Column content |
6 |
Column content |
Column content |
Column content |
7 |
Column content |
Column content |
Column content |
8 |
Column content |
Column content |
Column content |
9 |
Column content |
Column content |
Column content |
<!-- 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.
# |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
1 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
2 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
3 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
# |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
1 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
2 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
3 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
<div class="table-responsive">
<table class="table">
...
</table>
</div>