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.
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.
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.
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.
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.
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.
Clip
Use .ribbon-clip class to quickly switch a clip
styled ribbons, add .ribbon-bottom to switch the
ribbon direction.
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.
Badge
Use .ribbon-badge class to quickly switch a badge
styled ribbons, add .ribbon-bottom to switch the
ribbon direction.
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.
Corner
Use .ribbon-corner class to quickly switch a corner
styled ribbons, add .ribbon-bottom to switch the
ribbon direction. An icon used in an ribbon with additional
.wb-heart class.
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.