I have been utilizing the bootstrap grid system to generate different-sized "blocks" on my webpage. Some of these blocks require a ribbon (such as "new" products). The challenge lies in how I create these ribbons, which involves wrapping the block's contents with padding around it to allow the ribbon to seamlessly integrate and give the desired effect.
However, this approach also leads to the boxes being slightly smaller than intended due to the additional padding required for the ribbon.
To see how it currently appears, check out this demo: fiddleLink
CSS
.row {
padding: 5px;
background: #efefef;
}
.block {
position: relative;
padding: 5px;
}
.block-inner {
background: #fcc;
padding: 15px;
}
div.ribbon {
z-index: 1;
position: absolute;
top: 2px;
left: 0;
width: 88px;
height: 86px;
}
div#no-ribbon {
background: #ccf;
}
div.ribbon-text {
position: absolute;
top: 25px;
left: -15px;
width: 100px;
height: 20px;
text-align: center;
font-style: italic;
font-size: 16px;
color: white;
transform: rotate(-45deg);
}
HTML
<div class="container">
<div class="row">
<div class="col-xs-3 block">
<div class="ribbon">
<div class="ribbon-text">New!</div>
</div>
<div class="block-inner">
<p>Some awesome text and imagery, whatever</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3" id="no-ribbon">
<p>A block with its "actual" size</p>
</div>
</div>
</div>
Screenshot
The issue is evident in the misalignment of the visible left borders. While technically sound, from a user's perspective, it appears odd.
Is there a way to ensure that the left border of a block with a ribbon aligns perfectly with blocks without a ribbon?