# Typography See Our Typography, List Items, Tables, Icons

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

# h1. Heading 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

## h2. Heading 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

### h3. Heading 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

#### h4. Heading 4

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

##### h5. Heading 5

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

###### h6. Heading 6

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Button | class="" | Description
--- | --- | ---
Default | `btn` | Standard gray button with gradient
Primary | `btn btn-primary` | Provides extra visual weight and identifies the primary action in a set of buttons
Info | `btn btn-success` | Used as an alternative to the default styles
Success | `btn btn-success` | Indicates a successful or positive action
Warning | `btn btn-warning` | Indicates caution should be taken with this action
Danger | `btn btn-danger` | Indicates a dangerous or potentially negative action
Inverse | `btn btn-inverse` | Alternate dark gray button, not tied to a semantic action or use

# Messages

close Information! Lorem Ipsum is simply dummy
close Sucess! Lorem Ipsum is simply dummy
close Error! Lorem Ipsum is simply dummy
close Alert! Lorem Ipsum is simply dummy
close Information! Lorem Ipsum is simply dummy

# Inline labels

Labels | Markup
--- | ---
Default | `[label]Default[/label]`
Success | `[label style="label-success"]Success[/label]`
Warning | `[label style="label-warning"]Warning[/label]`
Important | `[label style="label-important"]Important[/label]`
Info | `[label style="label-info"]Info[/label]`
Inverse | `[label style="label-inverse"]Inverse[/label]`

# Badges

Name | Example | Markup
--- | --- | ---
Default | 1 | `[badge]1[/badge]`
Success | 2 | `[badge style="badge-success"]2[/badge]`
Warning | 4 | `[badge style="badge-warning"]4[/badge]`
Error | 6 | `[badge style="badge-error"]6[/badge]`
Info | 8 | `[badge style="badge-info"]8[/badge]`
Inverse | 10 | `[badge style="badge-inverse"]10[/badge]`

# Blockquotes

To include a blockquote, wrap `<blockquote>` around any HTML as the quote. For straight quotes we recommend a `<p>`.

Include an optional `<small>` element to cite your source and you'll get an em dash `&mdash;` before it for styling purposes.

1. <blockquote>
2. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
3. <small>Someone famous</small>
4. </blockquote>

## Example blockquotes

Default blockquotes are styled as such:

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

> Someone famous in Body of work

To float your blockquote to the right, add `class="pull-right"`:

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

> Someone famous in Body of work

# Lists

## Unordered

`<ul>`

- 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

`<ul class="unstyled">`

- 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

## Ordered

`<ol>`

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
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

## Unordered

`<ul>`

- 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

`<ul class="unstyled">`

- 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

## Ordered

`<ol>`

- 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

# Tables

### 1. Default table styles

Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the `.table` class is required.

1. <table class="table">
2. …
3. </table>

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

### 2. Striped table

Get a little fancy with your tables by adding zebra-striping—just add the `.table-striped` class.

Note: Striped tables use the `:nth-child` CSS selector and is not available in IE7-IE8.

1. <table class="table table-striped">
2. …
3. </table>

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

### 3. Bordered table

Add borders around the entire table and rounded corners for aesthetic purposes.

1. <table class="table table-bordered">
2. …
3. </table>

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
Mark | Otto | @TwBootstrap
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

### 4. Condensed table

Make your tables more compact by adding the `.table-condensed` class to cut table cell padding in half (from 8px to 4px).

1. <table class="table table-condensed">
2. …
3. </table>

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

### 5. Combine them all!

Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.

1. <table class="table table-striped table-bordered table-condensed">
2. ...
3. </table>

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

# Icons by Glyphicons

## Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons .

- icon-glass
- icon-music
- icon-search
- icon-envelope
- icon-heart
- icon-star
- icon-star-empty
- icon-user
- icon-film
- icon-th-large
- icon-th
- icon-th-list
- icon-ok
- icon-remove
- icon-zoom-in
- icon-zoom-out
- icon-off
- icon-signal
- icon-cog
- icon-trash
- icon-home
- icon-file
- icon-time
- icon-road
- icon-download-alt
- icon-download
- icon-upload
- icon-inbox
- icon-play-circle
- icon-repeat
- icon-refresh
- icon-list-alt
- icon-lock
- icon-flag
- icon-headphones
- icon-volume-off
- icon-volume-down
- icon-volume-up
- icon-qrcode
- icon-barcode
- icon-tag
- icon-tags
- icon-book
- icon-bookmark
- icon-print
- icon-camera
- icon-font
- icon-bold
- icon-italic
- icon-text-height
- icon-text-width
- icon-align-left
- icon-align-center
- icon-align-right
- icon-align-justify
- icon-list
- icon-indent-left
- icon-indent-right
- icon-facetime-video
- icon-picture
- icon-pencil
- icon-map-marker
- icon-adjust
- icon-tint
- icon-edit
- icon-share
- icon-check
- icon-move
- icon-step-backward
- icon-fast-backward
- icon-backward
- icon-play
- icon-pause
- icon-stop
- icon-forward
- icon-fast-forward
- icon-step-forward
- icon-eject
- icon-chevron-left
- icon-chevron-right
- icon-plus-sign
- icon-minus-sign
- icon-remove-sign
- icon-ok-sign
- icon-question-sign
- icon-info-sign
- icon-screenshot
- icon-remove-circle
- icon-ok-circle
- icon-ban-circle
- icon-arrow-left
- icon-arrow-right
- icon-arrow-up
- icon-arrow-down
- icon-share-alt
- icon-resize-full
- icon-resize-small
- icon-plus
- icon-minus
- icon-asterisk
- icon-exclamation-sign
- icon-gift
- icon-leaf
- icon-fire
- icon-eye-open
- icon-eye-close
- icon-warning-sign
- icon-plane
- icon-calendar
- icon-random
- icon-comment
- icon-magnet
- icon-chevron-up
- icon-chevron-down
- icon-retweet
- icon-shopping-cart
- icon-folder-close
- icon-folder-open
- icon-resize-vertical
- icon-resize-horizontal
- icon-hdd
- icon-bullhorn
- icon-bell
- icon-certificate
- icon-thumbs-up
- icon-thumbs-down
- icon-hand-right
- icon-hand-left
- icon-hand-up
- icon-hand-down
- icon-circle-arrow-right
- icon-circle-arrow-left
- icon-circle-arrow-up
- icon-circle-arrow-down
- icon-globe
- icon-wrench
- icon-tasks
- icon-filter
- icon-briefcase
- icon-fullscreen

### Glyphicons attribution

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.