Other Bootstrap Elements

Badges

Badge Positioning: There are multiple positions avalable for badges. Please check the documentation.

Default
Red Badge 42
Blue Badge 3
Green Badge 100
Orange Badge 99+
Yellow Badge 56
Lime Badge 999+
Pink Badge 2048
Bordered
Red Badge 42
Blue Badge 3
Green Badge 100
Orange Badge 99+
Yellow Badge 56
Lime Badge 999+
Pink Badge 2048
Labels

Labels do not have positioning like Badges. Use Badges if you need more flexibility.

Default Label Default
Primary Label Primary
Success Label Success
Info Label Info
Warning Label Warning
Danger Label Danger
Alerts

Alert

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

Alert - Closeable

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

Basic

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

Striped

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

Animated

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

Stacked

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

Sizes

Jumbo
40% Complete (success)
Extra Large
20% Complete
Large
60% Complete (warning)
Normal
80% Complete
Pills - Default
Pills - Stacked
Pagination
Pagination Sizing
Pager - Default
Pager - Aligned
Pager - Disabled State
Default Media Block
64x64

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.
64x64

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.
64x64

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.
64x64

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 Block
  • 64x64

    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.

    64x64

    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.
    64x64

    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.
    64x64

    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.
  • 64x64

    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.