# Overlays

## Overlay Container and Overlay with image

## Overlay

## Example

## Headers

## Disabled menu items

# Button groups

## Basic example

## Button toolbar

## Sizing

### Button Groups

### Buttons

## Sizing with icons

### Button Groups

### Buttons

## Nesting

## Vertical variation

## Justified button groups

#### With `<a>` elements

Left Middle Right
Left Middle
Dropdown

#### With `<button>` elements

# Button dropdowns

## Single button dropdowns

## Split button dropdowns

## Sizing

## Dropup variation

# Input groups

## Basic example

@
.00
$ .00

## Sizing

@
@
@

## Checkboxes and radio addons

## Button addons

## Buttons with dropdowns

## Segmented buttons

# Navs

## Tabs

## Pills

## Justified

## Disabled links

## Using dropdowns

### Tabs with dropdowns

### Pills with dropdowns

# Navbar

## Default navbar

## Forms

## Buttons

## Text

## Non-nav links

## Fixed to top

## Fixed to bottom

## Static top

## Inverted navbar

# Breadcrumbs

# Pagination

## Default pagination

- previous
- 1
- 2
- 3
- 4
- 5
- next

### Disabled and active states

- previous
- 1 (current)
- 2
- 3
- 4
- 5
- next

- previous
- 1 (current)
- 2
- 3
- 4
- 5(current)
- next

### Sizing

- previous
- 1
- 2
- 3
- 4
- 5
- next

- previous
- 1
- 2
- 3
- 4
- 5
- next

## Pager

### Default example

- Previous
- Next

### Aligned links

- ← Older
- Newer →

### Optional disabled state

- ← Older
- Newer →

# Labels

## Example

# Example heading New

## Available variations

Default Primary Success Info Warning Danger

# Badges

Inbox 42

## Adapts to active nav states

# Jumbotron

# Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

# Page header

# Example page header Subtext for header

# Thumbnails

## Default example

## Custom content

### Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

### Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

### Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

# Alerts

## Examples

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

## Dismissible alerts

Check me out! Maecenas sed diam eget risus varius blandit sit amet non magna.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Warning! Better check yourself, you're not looking too good.
3 contacts were entered incorrectly. Update now
kzhang@exacttarget.com kzhang@exacttarget.com kzhang@exacttarget.com Duis mollis, est non aaaaa commodo luctus, nisi erat porttitor ligula. Duis mollis, est non commodo luctus, nisi erat porttitor ligula. Duis mollis, est non a commodo luctus, nisi erat porttitor ligula. Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

## Links in alerts

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

# Progress bars

## Basic example

60% Complete

## With label

60%

## Low percentages

0%
2%

## Contextual alternatives

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

## Striped

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

## Animated

45% Complete

## Stacked

35% Complete (success)
20% Complete (warning)
10% Complete (danger)

## Standard progress bar

40% Complete (info)
20% Complete (success)
60% Complete (warning)

## Indeterminate progress bar

100% Complete
100% Complete (success)
100% Complete (warning)

## Small progress bar

40% Complete (success)
20% Complete
60% Complete (warning)

# Media object

## Default media

#### Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

#### Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

#### Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

## Media list

- #### Media heading

  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

  #### Nested media heading

  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

  #### Nested media heading

  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

  #### Nested media heading

  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

- #### Media heading

  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

# List group

## Basic example

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

## Badges

- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- 1 Morbi leo risus

## Linked items

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

## Disabled items

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

## Contextual classes

- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros

## Custom content

#### List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

#### List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

#### List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

# Panels

## Basic example

Basic panel example

## Panel with heading

Panel heading without title
Panel content
Panel title
Panel content

## Panel with footer

Panel content

## Contextual alternatives

Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content

## With tables

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Panel heading

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

## With list groups

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

# Responsive embed

# Wells

## Default well

Look, I'm in a well!

## Optional classes

Look, I'm in a large well!
Look, I'm in a small well!