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

One line pure CSS corner and bookmark ribbon banner with text, icon or any HTML content. Available in various sizes, positions and styles.

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.

Sale!

Ribbon

Simple corner ribbon

Sale!

Ribbon

Corner ribbon with folds

Ribbon

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.

Title

Content

Sale!

Title

Content

Yours

Title

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.

Title

Content

Sale

Title

Content

Yours

Title

Content

<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.

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

<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

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

<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.

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

<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

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

<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.

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

<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.

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

<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

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

<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.

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

<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.

Title

Content

Sale!

Title

Content

Title

Content

Title

Content

Sale!

Title

Content

Title

Content

<!-- 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.

Title

Content

Sale!

Title

Content

Title

Content

Title

Content

Sale!

Title

Content

Title

Content

<!-- 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.

Title

Content

Sale!

Title

Content

Title

Content

Title

Content

Sale!

Title

Content

Title

Content

<!-- 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.

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

<!-- 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

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

<!-- 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.

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

<!-- 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

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

<!-- 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

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

<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

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

<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

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

<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

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

Sale!

Title

Content

<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>

References

Top Articles
Latest Posts
Article information

Author: Catherine Tremblay

Last Updated: 01/30/2024

Views: 6141

Rating: 4.7 / 5 (47 voted)

Reviews: 86% of readers found this page helpful

Author information

Name: Catherine Tremblay

Birthday: 1999-09-23

Address: Suite 461 73643 Sherril Loaf, Dickinsonland, AZ 47941-2379

Phone: +2678139151039

Job: International Administration Supervisor

Hobby: Dowsing, Snowboarding, Rowing, Beekeeping, Calligraphy, Shooting, Air sports

Introduction: My name is Catherine Tremblay, I am a precious, perfect, tasty, enthusiastic, inexpensive, vast, kind person who loves writing and wants to share my knowledge and understanding with you.