Bootstrap Ribbons PRO
One line pure CSS corner and bookmark ribbon banner with text, icon or any HTML content. Available in various sizes, positions and styles.
What's New
Overview
Bootstrap ribbons comes handy when you need to mark or promote a certain element on the page. Our ribbons are pure CSS with simple markup,
that allows to create corner or bookmark-style ribbons with just one HTML line of code. Ribbons make use of clip-path and mask-image and no border (like majority of articles mentioned),
so you can create custom styles by combining background color and text color. There are four predefined sizes available or size the ribbons using font size.
You can also make stylish ribbon with folds just by adding .ribbon-fold class. Folds are automatically colorized depending on ribbon color and sized depending on ribbon size.
Bootstrap ribbon examples
Pure CSS ribbons in different variations applied on Bootstrap card.
Ribbon
Simple corner ribbon
Ribbon
Corner ribbon with folds
Ribbon
Bookmark ribbon
Ribbon Corner
To create a corner ribbon, add .ribbon-corner class to element and make sure to set relative position to the parent element. Default ribbon position is right top,
but other positions are available.
Content
Ribbon can contains just a plain text or any HTML content. You can also display a ribbon without any content.
<!-- Empty ribbon -->
<div class="card">
<div class="ribbon-corner"></div>
...
</div>
<!-- Text within ribbon -->
<div class="card">
<div class="ribbon-corner">Sale!</div>
...
</div>
<!-- Custom HTML -->
<div class="card">
<div class="ribbon-corner">
<div class="ribbon-content"><i class="bi bi-person-fill mr-2"></i>Yours</div>
</div>
...
</div>With folds
Add .ribbon-fold class to .ribbon-corner to create a stylish ribbon folds. These folds inherit a background color from a parent ribbon and are automatically darkened.
<div class="card">
<div class="ribbon-corner ribbon-fold"></div>
...
</div>
<div class="card">
<div class="ribbon-corner ribbon-fold">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner ribbon-fold"><i class="bi bi-person-fill mr-2"></i>Yours</div>
...
</div>Background color
Use .bg-* Background color utility or set any CSS background-color to ribbon. Folds are automatically colorized based on ribbon background color.
<div class="card">
<div class="ribbon-corner">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner bg-secondary">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner bg-maroon">Sale!</div>
...
</div>With folds
<div class="card">
<div class="ribbon-corner ribbon-fold">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner ribbon-fold bg-secondary">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner ribbon-fold bg-maroon">Sale!</div>
...
</div>Sizing
To resize the ribbons, choose from predefined sizes or use font-size based sizing. You can also combine them to create custom ribbon style.
Predefined sizes
There are four predefined sizes. A .ribbon-corner class has default value of 3em, but combine it with .ribbon-{sm|lg|xl} class to make a ribbon smaller or larger.
<div class="card">
<div class="ribbon-corner ribbon-sm">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner ribbon-lg">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner ribbon-xl">Sale!</div>
...
</div>With folds
<div class="card">
<div class="ribbon-corner ribbon-fold ribbon-sm">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner ribbon-fold">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner ribbon-fold ribbon-lg">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner ribbon-fold ribbon-xl">Sale!</div>
...
</div>Font size based
Because ribbons use em units, it’s also possible to resize them according the font size. Set font-size directly on .ribbon-corner. If you want to inherit the font size from
parent element, use font-size: inherit on the ribbon.
<div class="card">
<div class="ribbon-corner" style="font-size: .5rem;">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner" style="font-size: 1.5rem;">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner" style="font-size: 20px;">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner h5">Sale!</div>
...
</div>With Folds
By adding .ribbon-fold, folds are automatically resized according the ribbon (font) size.
<div class="card">
<div class="ribbon-corner ribbon-fold" style="font-size: .5rem;">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner ribbon-fold" style="font-size: 1.5rem;">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner ribbon-fold" style="font-size: 20px;">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner ribbon-fold h5">Sale!</div>
...
</div>Position
Default ribbon position is right top, but using data-position="{x y}" from Custom position utility you can place it into these positions:
left bottomleft topright top(default, no need to usedata-position)right bottom
<div class="card">
<div class="ribbon-corner" data-position="left bottom">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner" data-position="left top">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-corner" data-position="right bottom">Sale!</div>
...
</div>With Folds
Folds are automatically rotate according the ribbon position.
<div class="card">
<div class="ribbon-corner ribbon-fold" data-position="left bottom"></div>
...
</div>
<div class="card">
<div class="ribbon-corner ribbon-fold" data-position="left top"></div>
...
</div>
<div class="card">
<div class="ribbon-corner ribbon-fold"></div>
...
</div>
<div class="card">
<div class="ribbon-corner ribbon-fold" data-position="right bottom"></div>
...
</div>Ribbon bookmark
Create bookmark-style ribbon with .ribbon-bookmark-v for vertical or .ribbon-bookmark-h for horizontal bookmark. Fold and cutout are automatically resized when changing
ribbon size. When using vertical .ribbon-bookmark-v, rotate the text by using .text-vertical utility.
Content
You can display empty ribbon, add plain text or any HTML as ribbon content. Use .text-vertical for vertical align text.
<!-- Vertical ribbons -->
<div class="card">
<div class="ribbon-bookmark-v"></div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v text-vertical">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v">
<div class="ribbon-content"><i class="bi bi-person-fill"></i></div>
</div>
...
</div>
<!-- Horizontal ribbons -->
<div class="card">
<div class="ribbon-bookmark-h"></div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h">
<div class="ribbon-content"><i class="bi bi-person-fill"></i></div>
</div>
...
</div>With fold
Add .ribbon-fold class to .ribbon-bookmark to display a folding. Folds are automatically colorized.
<!-- Vertical ribbons -->
<div class="card">
<div class="ribbon-bookmark-v ribbon-fold"></div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v ribbon-fold bg-maroon text-vertical">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v ribbon-fold bg-secondary">
<div class="ribbon-content"><i class="bi bi-person-fill"></i></div>
</div>
...
</div>
<!-- Horizontal ribbons -->
<div class="card">
<div class="ribbon-bookmark-h ribbon-fold"></div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h ribbon-fold bg-maroon">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h ribbon-fold bg-secondary">
<div class="ribbon-content"><i class="bi bi-person-fill"></i></div>
</div>
...
</div>Background color
Use .bg-* Background color utility or set any CSS background-color to ribbon. Folds are automatically colorized based on ribbon background color.
<!-- Vertical ribbons -->
<div class="card">
<div class="ribbon-bookmark-v"></div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v bg-maroon text-vertical">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v bg-secondary">
<div class="ribbon-content"><i class="bi bi-person-fill"></i></div>
</div>
...
</div>
<!-- Horizontal ribbons -->
<div class="card">
<div class="ribbon-bookmark-h"></div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h bg-maroon">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h bg-secondary">
<div class="ribbon-content"><i class="bi bi-person-fill"></i></div>
</div>
...
</div>Sizing
Use four predefined sizes for each vertical and horizontal variation, or use font size to resize the ribbons.
Predefined sizes
Combine .ribbon-{sm|lg|xl} with the .ribbon-bookmark-* to size the ribbon. Default size is 3em.
<!-- Vertical -->
<div class="card">
<div class="ribbon-bookmark-v ribbon-sm text-vertical">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v text-vertical">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v ribbon-lg text-vertical">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v ribbon-xl text-vertical">Sale!</div>
...
</div>
<!-- Horizontal -->
<div class="card">
<div class="ribbon-bookmark-h ribbon-sm text-vertical">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h text-vertical">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h ribbon-lg text-vertical">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h ribbon-xl text-vertical">Sale!</div>
...
</div>With fold
<!-- Vertical -->
<div class="card">
<div class="ribbon-bookmark-v ribbon-fold ribbon-sm text-vertical">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v ribbon-fold text-vertical">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v ribbon-fold ribbon-lg text-vertical">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v ribbon-fold ribbon-xl text-vertical">Sale!</div>
...
</div>
<!-- Horizontal -->
<div class="card">
<div class="ribbon-bookmark-h ribbon-fold ribbon-sm">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h ribbon-fold">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h ribbon-fold ribbon-lg">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h ribbon-fold ribbon-xl">Sale!</div>
...
</div>Font size based
Set font-size directly on .ribbon-corner to resize the ribbon using the font size. If you want to inherit the font size from parent element, use font-size: inherit on the ribbon.
<!-- Vertical -->
<div class="card">
<div class="ribbon-bookmark-v text-vertical" style="font-size: .5rem;">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v text-vertical" style="font-size: 1.5rem;">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v text-vertical" style="font-size: 20px;">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v text-vertical h5">Sale!</div>
...
</div>
<!-- Horizontal -->
<div class="card">
<div class="ribbon-bookmark-h" style="font-size: .5rem;">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h" style="font-size: 1.5rem;">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h" style="font-size: .5rem;">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h h5">Sale!</div>
...
</div>With fold
<!-- Vertical -->
<div class="card">
<div class="ribbon-bookmark-v ribbon-fold text-vertical" style="font-size: .5rem;">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v ribbon-fold text-vertical" style="font-size: 1.5rem;">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v ribbon-fold text-vertical" style="font-size: 20px;">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v ribbon-fold text-vertical h5">Sale!</div>
...
</div>
<!-- Horizontal -->
<div class="card">
<div class="ribbon-bookmark-h ribbon-fold" style="font-size: .5rem;">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h ribbon-fold" style="font-size: 1.5rem;">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h ribbon-fold" style="font-size: 20px;">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h ribbon-fold h5">Sale!</div>
...
</div>Position
Default ribbon position is right top, but using data-position="{x y}" from Custom position utility you can place it into
these positions for vertical and horizontal variation:
left bottomleft topright top(default, no need to usedata-position)right bottom
Vertical ribbons
<div class="card">
<div class="ribbon-bookmark-v text-vertical" data-position="left bottom">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v text-vertical" data-position="left top">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v text-vertical">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v text-vertical" data-position="right bottom">Sale!</div>
...
</div>With fold
<div class="card">
<div class="ribbon-bookmark-v ribbon-fold text-vertical" data-position="left bottom">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v ribbon-fold text-vertical" data-position="left top">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v ribbon-fold text-vertical">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-v ribbon-fold text-vertical" data-position="right bottom">Sale!</div>
...
</div>Horizontal ribbons
<div class="card">
<div class="ribbon-bookmark-h" data-position="left bottom">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h" data-position="left top">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h" data-position="right bottom">Sale!</div>
...
</div>With fold
<div class="card">
<div class="ribbon-bookmark-h ribbon-fold" data-position="left bottom">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h ribbon-fold" data-position="left top">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h ribbon-fold">Sale!</div>
...
</div>
<div class="card">
<div class="ribbon-bookmark-h ribbon-fold" data-position="right bottom">Sale!</div>
...
</div>