flatter
  1. Home
  2. Elements
  3. General

General Elements

Progress Bars

Simple progress bars

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

Striped progress bars

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

Stacked progress bar

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

Animated progress bar

45% Complete

With label

60%

Labels Badges & Pagination

Labels

Default Primary Success Info Warning Danger

Badges

42 42 42 42 42 42

Pagination


Other Elements

List Basic Example

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

List with badges

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus
  • 2 Dapibus ac facil in
  • 8 Dapibus ac faisis in

Custom list 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.

Custom Backgrounds

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.