Bootstrap Ribbons -- Tutorials with advanced examples | Torus Kit (2023)

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 clip-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 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-tor="<place.x> <place.y>" from Custom position utility you can place it into these positions:

• left bottom
• left top
• right top (default, no need to use data-tor)place.
• right bottom

<div class="card"> <div class="ribbon-corner" data-tor="place.left place.bottom">Sale!</div> ...</div><div class="card"> <div class="ribbon-corner" data-tor="place.left place.top">Sale!</div> ...</div><div class="card"> <div class="ribbon-corner">Sale!</div> ...</div><div class="card"> <div class="ribbon-corner" data-tor="place.right place.bottom">Sale!</div> ...</div>

With Folds

Folds are automatically rotate according the ribbon position.

<div class="card"> <div class="ribbon-corner ribbon-fold" data-tor="place.left place.bottom"></div> ...</div><div class="card"> <div class="ribbon-corner ribbon-fold" data-tor="place.left place.top"></div> ...</div><div class="card"> <div class="ribbon-corner ribbon-fold"></div> ...</div><div class="card"> <div class="ribbon-corner ribbon-fold" data-tor="place.right place.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-tor="{place.x y}" from Custom position utility you can place it into these positions for vertical and horizontal variation:

• left bottom
• left top
• right top (default, no need to use data-tor)place.
• right bottom

Vertical ribbons

<div class="card"> <div class="ribbon-bookmark-v text-vertical" data-tor="place.left place.bottom">Sale!</div> ...</div><div class="card"> <div class="ribbon-bookmark-v text-vertical" data-tor="place.left place.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-tor="place.right place.bottom">Sale!</div> ...</div>

With fold

<div class="card"> <div class="ribbon-bookmark-v ribbon-fold text-vertical" data-tor="place.left place.bottom">Sale!</div> ...</div><div class="card"> <div class="ribbon-bookmark-v ribbon-fold text-vertical" data-tor="place.left place.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-tor="place.right place.bottom">Sale!</div> ...</div>

Horizontal ribbons

<div class="card"> <div class="ribbon-bookmark-h" data-tor="place.left place.bottom">Sale!</div> ...</div><div class="card"> <div class="ribbon-bookmark-h" data-tor="place.left place.top">Sale!</div> ...</div><div class="card"> <div class="ribbon-bookmark-h">Sale!</div> ...</div><div class="card"> <div class="ribbon-bookmark-h" data-tor="place.right place.bottom">Sale!</div> ...</div>

With fold

<div class="card"> <div class="ribbon-bookmark-h ribbon-fold" data-tor="place.left place.bottom">Sale!</div> ...</div><div class="card"> <div class="ribbon-bookmark-h ribbon-fold" data-tor="place.left place.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-tor="place.right place.bottom">Sale!</div> ...</div>