Milestone
30%

Release
60%

Ribbon

Basic

Ribbons have shared markup, starting with the default .ribbons class, as well as shared states. Swap modifier classes .vertical to switch ribbon direction. Add any of the below mentioned modifier
classes (example, .ribbon-danger and .ribbon-warning)
to change the appearance of a ribbon.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus
diam.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus
diam.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus
diam.

Integer nec odio. Praesent libero. Sed cursus ante dapibus
diam.

Integer nec odio. Praesent libero. Sed cursus ante dapibus
diam.

Integer nec odio. Praesent libero. Sed cursus ante dapibus
diam.

Reverse

Alternatively, you can align ribbons to the right by using .ribbon-reverse utility classes.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus
diam.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus
diam.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus
diam.

Integer nec odio. Praesent libero. Sed cursus ante dapibus
diam.

Integer nec odio. Praesent libero. Sed cursus ante dapibus
diam.

Integer nec odio. Praesent libero. Sed cursus ante dapibus
diam.

Bookmark

Use .ribbon-bookmark class to quickly switch a bookmark
styled ribbons.