"Bootstrap 4.3 Cards with corner ribbon"
Bootstrap 4.1.1 Snippet by BelarusAndreas

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Include the above in your HEAD tag --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script><!-- Include the above in your HEAD tag --> </head> <body> <br> <div class="container"> <h4 class="text-center">Bootstrap 4.3 Cards</h4> <h5 class="text-center small">Bootstrap responsive cards with card-image, card-header, card-body, card-listed tags and card-footer without any additional CSS or JS. Just pure Bootstrap :)</h5> </div><br> <div class="container"><br><br> <!-- ::::: Begin cards ::::: --> <div class="container"> <div class="card-deck"> <div class="col-lg-3 col-md-4 col-sm-6 mb-4"> <div class="card h-100 border-primary overflow"> <h4 class='corner corner-red'>Top</h4> <div class='card-header bg-primary'> <img class='card-img-top rounded' src="https://placeimg.com/500/500/any"> </div> <div class='card-body'> <h4 class='card-title'><a href='$path'>First Card</a></h4> <ul class='list-unstyled'> <li> <span class='badge badge-primary'>Tag</span> <span class='badge badge-success'>Tag</span> <span class='badge badge-danger'>Tag</span> <span class='badge badge-warning'>Tag</span> </li> </ul> <p class='card-text'>Lorem ipsum dolor sit amet, ...</p> </div> <div class='card-footer text-center bg-primary'> <a href='#' class='btn btn-primary stretched-link'>Read more</a> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 mb-4"> <div class="card h-100 border-success overflow"> <h4 class='corner corner-yellow'>Top</h4> <div class='card-header bg-success'> <img class='card-img-top rounded' src="https://placeimg.com/500/500/any"> </div> <div class='card-body'> <h4 class='card-title'><a href='$path'>Second Card</a></h4> <ul class='list-unstyled'> <li> <span class='badge badge-primary'>Tag</span> <span class='badge badge-success'>Tag</span> <span class='badge badge-danger'>Tag</span> <span class='badge badge-warning'>Tag</span> </li> </ul> <p class='card-text'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor ...</p> </div> <div class='card-footer text-center bg-success'> <a href='#' class='btn btn-success stretched-link'>Read more</a> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 mb-4"> <div class="card h-100 border-danger overflow"> <h4 class='corner corner-blue'>Top</h4> <div class='card-header bg-danger'> <img class='card-img-top rounded' src="https://placeimg.com/500/500/any"> </div> <div class='card-body'> <h4 class='card-title'><a href='$path'>Third Card</a></h4> <ul class='list-unstyled'> <li> <span class='badge badge-primary'>Tag</span> <span class='badge badge-success'>Tag</span> <span class='badge badge-danger'>Tag</span> <span class='badge badge-warning'>Tag</span> </li> </ul> <p class='card-text'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> </div> <div class='card-footer text-center bg-danger'> <a href='#' class='btn btn-danger stretched-link'>Read more</a> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 mb-4"> <div class="card h-100 border-warning overflow"> <h4 class='corner corner-green'>Top</h4> <div class='card-header bg-warning'> <img class='card-img-top rounded' src="https://placeimg.com/500/500/any"> </div> <div class='card-body'> <h4 class='card-title'><a href='$path'>Fourth Card</a></h4> <ul class='list-unstyled'> <li> <span class='badge badge-primary'>Tag</span> <span class='badge badge-success'>Tag</span> <span class='badge badge-danger'>Tag</span> <span class='badge badge-warning'>Tag</span> </li> </ul> <p class='card-text'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ...</p> </div> <div class='card-footer text-center bg-warning'> <a href='#' class='btn btn-warning text-light stretched-link'>Read more</a> </div> </div> </div> </div> <!-- ::::: End cards ::::: --> <!-- Note: If your dont need the following button, please close the div container before this ending line with </div> --> <!-- ::::: Start additional button ::::: --> <div class="container"> <a href="#" class="text-decoration-none"> <button type="button" class="btn btn-primary btn-lg btn-block">Show all</button> </a> </div><br><br> <!-- ::::: End additional button ::::: --> </div> <div class="text-center"> <p class="small text-dark">You need cards without corner ribbon? Have a look at this <a href="https://bootsnipp.com/user/snippets/5P54v">Snippet</a></p> <p class="small text-dark">If you like it, please spend me a coffee :)</p> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <input type="hidden" name="cmd" value="_s-xclick" /> <input type="hidden" name="hosted_button_id" value="HKBSPX48YNWUQ" /> <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" /> <img alt="" border="0" src="https://www.paypal.com/en_BY/i/scr/pixel.gif" width="1" height="1" /> </form><br><br> </div> </div> </body>
/* General */ .overflow { overflow: hidden; } .corner:before { right:100%; } .corner:after { left:100%; } /* RED - Color */ .corner-red { height: 23px; margin: 5px; padding: 0; font-size: 18px; color: white; padding: 0em ; position: absolute; top: -3px; right: -5px; transform: translateX(30%) translateY(0%) rotate(45deg); transform-origin: top left; background: red; } .corner-red:before, .corner-red:after { content: ''; position: absolute; top: 0; margin: 0 -1px; width: 200%; height: 100%; background: red; } /* BLUE - Color */ .corner-blue { height: 23px; margin: 5px; padding: 0; font-size: 18px; color: white; padding: 0em ; position: absolute; top: -3px; right: -5px; transform: translateX(30%) translateY(0%) rotate(45deg); transform-origin: top left; background: #001797; } .corner-blue:before, .corner-blue:after { content: ''; position: absolute; top: 0; margin: 0 -1px; width: 200%; height: 100%; background: #001797; } /* GREEN - Color */ .corner-green { height: 23px; margin: 5px; padding: 0; font-size: 18px; color: white; padding: 0em ; position: absolute; top: -3px; right: -5px; transform: translateX(30%) translateY(0%) rotate(45deg); transform-origin: top left; background: green; } .corner-green:before, .corner-green:after { content: ''; position: absolute; top: 0; margin: 0 -1px; width: 200%; height: 100%; background: green; } /* YELLOW - Color */ .corner-yellow { height: 23px; margin: 5px; padding: 0; font-size: 18px; color: white; padding: 0em ; position: absolute; top: -3px; right: -5px; transform: translateX(30%) translateY(0%) rotate(45deg); transform-origin: top left; background: yellow; } .corner-yellow:before, .corner-yellow:after { content: ''; position: absolute; top: 0; margin: 0 -1px; width: 200%; height: 100%; background: yellow; }

Related: See More

Vue Material Kit
Information Cards
Responsive Data Cards (Bootstrap 4)
Bootstrap 4 and CCS3 Product Cards with Transition

Questions / Comments: