# General UI

## Progress Bars

### Progress Bars Different Sizes

`.progress`

40% Complete (success)

Class: `.sm`

20% Complete

Class: `.xs`

60% Complete (warning)

Class: `.xxs`

60% Complete (warning)

### Progress bars

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

The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations.

60% Complete (warning)

### Vertical Progress Bars Different Sizes

By adding the class `.vertical` and `.progress-sm`, `.progress-xs` or `.progress-xxs` we achieve:

40%
100%
60%
60%

### Vertical Progress bars

By adding the class `.vertical` we achieve:

40%
20%
60%
80%

## Typography

### Headlines

# h1. Bootstrap heading

## h2. Bootstrap heading

### h3. Bootstrap heading

#### h4. Bootstrap heading

##### h5. Bootstrap heading

###### h6. Bootstrap heading

### Text Emphasis

Lead to emphasize importance

Text green to emphasize success

Text aqua to emphasize info

Text purple to emphasize info

Text light blue to emphasize info (2)

Text red to emphasize danger

Text yellow to emphasize warning

Text muted to emphasize general

### Block Quotes

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

### Block Quotes Pulled Right

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

### 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

### Ordered Lists

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
   1. Phasellus iaculis neque
   2. Purus sodales ultricies
   3. Vestibulum laoreet porttitor sem
   4. Ac tristique libero volutpat at
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

### Unstyled 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

### Description

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.

### Description 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.