## Typography

### Headings

# Page Header

# h1. Header 1 Secondary text

## h2. Header 2 Secondary text

### h3. Header 3 Secondary text

#### h4. Header 4 Secondary text

##### h5. Header 5 Secondary text

###### h6. Header 6 Secondary text

### Block elements

p(aragraph): Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

p(aragraph).lead: Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

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

> blockquote.blockquote-reverse: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    pre(formatted)<p>Sample text here…</p>

    pre.pre-scrollable<p>Sample text here…</p>

### Alignment classes

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

### Lists

Ordered list

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 list

- 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

List inline

- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat

Definition list

Description lists
  A description list is perfect for defining terms.
Euismod
  Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
  Donec id elit non mi porta gravida at eget metus.
Malesuada porta
  Etiam porta sem malesuada magna mollis euismod.

Definition list horizontal

Description lists
  A description list is perfect for defining terms.
Euismod
  Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
  Donec id elit non mi porta gravida at eget metus.
Malesuada porta
  Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
  Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

### Inline text elements

sup(erscript)
sub(script)
mark(ed text)
del(ete)
s(trikethough)
ins(serted)
un(derline)
small
b(old)
em(phasis)
`<section>`
`kdb`(keyboard)
var(iable)
`samp`(le)
attr(ibute)
attr.initialism

### Transformation classes

Lowercased text.
Uppercased text.
Capitalized text.

### Contextual colors

.text-muted .text-primary .text-success .text-info .text-warning .text-danger

### Contextual backgrounds

.bg-muted .bg-primary .bg-success .bg-info .bg-warning .bg-danger

### Labels

label-default label-primary label-success label-warning label-danger label-info

### Alerts

Warning link and some text.
Danger link and some text.
Success link and some text.
Info link and some text.

### Wells

div.well Look, I'm in a well!
div.well.well-sm Look, I'm in a small well!
div.well.well-lg Look, I'm in a large well!