div ribbons

This bootstrap snippet called "div ribbons" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: content,ribbons,div

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<div class="container bootstrap snippet">
    <div class="row mb-20">
        <div class="col-md-3">
            <div class="ribbon-content">
                <div class="ribbon base"><span>Limited Offer</span></div>
            </div>
        </div> 
        <div class="col-md-3">
            <div  class="ribbon-content">
                <div class="ribbon base-alt"><span>Limited Offer</span></div>
            </div>
        </div> 
        <div class="col-md-3">
            <div  class="ribbon-content">
                <div class="ribbon orange"><span>Limited Offer</span></div>
            </div>
        </div> 
        <div class="col-md-3">
            <div  class="ribbon-content">
                <div class="ribbon dark"><span>Limited Offer</span></div>
            </div>
        </div> 
    </div>
    <div class="row mb-20">
        <div class="col-md-3">
            <div  class="ribbon-content">
                <div class="ribbon red"><span>Limited Offer</span></div>
            </div>
        </div> 
        <div class="col-md-3">
            <div  class="ribbon-content">
                <div class="ribbon yellow"><span>Limited Offer</span></div>
            </div>
        </div> 
        <div class="col-md-3">
            <div  class="ribbon-content">
                <div class="ribbon light"><span>Limited Offer</span></div>
            </div>
        </div> 
    </div>
</div>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

.ribbon {
    position: absolute;
    top: 20px;
    right: -5px;
    padding: 15px;
}
.ribbon-content{
    position: relative; 
    width: 100%; 
    height: 100px; 
    background: #f1f1f1; 
    border: 1px solid #DDD;    
}
.ribbon.base {
    background: #3498db;
    color: #fff;
    border-right: 5px solid #8bc4ea;
}
.ribbon.light {
    background: #ecf0f1;
    color: #2c3e50;
    border-right: 5px solid #dde4e6;
}
.ribbon.dark {
    background: #131313;
    color: #fff;
    border-right: 5px solid #464646;
}
.ribbon.base-alt {
    background: #9cd70e;
    color: #fff;
    border-right: 5px solid #c6f457;
}
.ribbon.red {
    background: #e91b23;
    color: #fff;
    border-right: 5px solid #f2787d;
}
.ribbon.orange {
    background: #ff8a3c;
    color: #fff;
    border-right: 5px solid #ffc7a2;
}
.ribbon.yellow {
    background: #ffd800;
    color: #fff;
    border-right: 5px solid #ffe866;
}
.ribbon:before, .ribbon:after {
    content: '';
    position: absolute;
    left: -9px;
    border-left: 10px solid transparent;
}
.ribbon:before {
    top: 0;
}
.ribbon:after {
    bottom: 0;
}
.ribbon.base:before {
    border-top: 27px solid #3498db;
}
.ribbon.base:after {
    border-bottom: 27px solid #3498db;
}
.ribbon.light:before {
    border-top: 27px solid #ecf0f1;
}
.ribbon.light:after {
    border-bottom: 27px solid #ecf0f1;
}
.ribbon.dark:before {
    border-top: 27px solid #131313;
}
.ribbon.dark:after {
    border-bottom: 27px solid #131313;
}
.ribbon.base-alt:before {
    border-top: 27px solid #9cd70e;
}
.ribbon.base-alt:after {
    border-bottom: 27px solid #9cd70e;
}
.ribbon.red:before {
    border-top: 27px solid #e91b23;
}
.ribbon.red:after {
    border-bottom: 27px solid #e91b23;
}
.ribbon.orange:before {
    border-top: 27px solid #ff8a3c;
}
.ribbon.orange:after {
    border-bottom: 27px solid #ff8a3c;
}
.ribbon.yellow:before {
    border-top: 27px solid #ffd800;
}
.ribbon.yellow:after {
    border-bottom: 27px solid #ffd800;
}
.ribbon span {
    display: block;
    font-size: 16px;
    font-weight: 600;
}
                                    

Similar snippets

Bootstrap snippet Box shadow effect

Box shadow effect

View

Bootstrap snippet Select Content Type

Select Content Type

View

Bootstrap snippet Team member

Team member

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: May 16th 2015, 23:08

Views: 5.3K

Rated 5/5 based on 3 reviews