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