Popups & Alerts

Bootstrap Modal

Default Modal Styled Modal Large Modal

Single Image Popup

Gallery Image Popup

Video Popup

Open YouTube video
Open Vimeo video
Open Google Map

Simple Labels

A label, with optional background colors. Use the labelclass to create a label

Default Primary Secondary Tertiary Success Info Warning Danger

Badge Variation

A Badge, with optional background colors. Use the badgeclass to create a Badge

4 13 13 13

Dropdown Buttons

Action
Another action
Something else here
Separated link

Action
Another action
Something else here
Separated link

Action
Another action
Something else here
Separated link

Dropdown Menu

Action
Another action
Something else here
Sub Menu

Tool Tips

Pop Overs

Simple 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 up and try submitting again.

Progress Bars

40% Complete (primary)

60% 60% Complete (secondary)

80% Complete (tertiary)

Progress Striped (Active)

40% Complete (primary)

60% Complete (secondary)

80% Complete (tertiary)

Progress Sizes

40% Complete (primary)

60% Complete (secondary)

80% Complete (tertiary)

Basic Modal

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

Styled Modal

Large Modal

Text in a modal

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

Popover in a modal

This button should trigger a popover on click.

Tooltips in a modal

This link and that link should have tooltips on hover.

Overflowing text to show scroll behavior

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.