<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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" />
<title>Custom Bootstrap 4 card</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<div class="container">
<div class="row pt-5 m-auto">
<div class="col-md-6 col-lg-4 pb-3">
<!-- Copy the content below until next comment -->
<div class="card card-custom bg-white border-white border-0">
<div class="card-custom-img" style="background-image: url(http://res.cloudinary.com/d3/image/upload/c_scale,q_auto:good,w_1110/trianglify-v1-cs85g_cc5d2i.jpg);"></div>
<div class="card-body" style="overflow-y: auto">
<p class="card-text bottom">Card has minimum height set but will expand if more space is needed for card body content. You can use Bootstrap <a href="https://getbootstrap.com/docs/4.0/components/card/#card-decks" target="_blank">card-decks</a> to align multiple cards nicely in a row.</p>
</div>
</div>
<!-- Copy until here -->
</div>
<div class="col-md-6 col-lg-4 pb-3">
<!-- Add a style="height: XYZpx" to div.card to limit the card height and display scrollbar instead -->
<div class="card card-custom bg-white border-white border-0" style="height: 450px">
<div class="card-custom-img" style="background-image: url(http://res.cloudinary.com/d3/image/upload/c_scale,q_auto:good,w_1110/trianglify-v1-cs85g_cc5d2i.jpg);"></div>
<div class="card-custom-avatar">
<img class="img-fluid" src="http://res.cloudinary.com/d3/image/upload/c_pad,g_center,h_200,q_auto:eco,w_200/bootstrap-logo_u3c8dx.jpg" alt="Avatar" />
</div>
<div class="card-body" style="overflow-y: auto">
<h4 class="card-title">Card title</h4>
<p class="card-text">You can also set maximum height on and the card will not expand, instead a scrollbar in the card body will appear.</p>
<p class="card-text">Some example text to show the scrollbar.</p>
<p class="card-text">Lorem ipsum dolor sit amet, te vix omittam fastidii, enim paulo omnes ea has, illud luptatum no qui. Sed ea qualisque urbanitas, purto elit nec te. Possim inermis antiopam ut eum. Eos te zril labore laboramus, quem erant nam in. Ut sed molestie
antiopam. At altera facilisis mel.</p>
</div>
<div class="card-footer" style="background: inherit; border-color: inherit;">
<a href="#" class="btn btn-primary">Option</a>
<a href="#" class="btn btn-outline-primary">Other option</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 pb-3">
<div class="card card-custom bg-white border-white border-0">
<div class="card-body">
<img src="http://res.cloudinary.com/d3/image/upload/c_scale,h_450,q_auto:best/color-cards_lorvwg.jpg" alt="Colored cards" class="img-fluid">
<p>You can use this card together with standard Bootstrap 4 cards and use card features on it.</p>
<p class="h5 text-center pt-3">See the card on GitHub:</p>
<p class="h1 text-center"><a href="https://github.com/peterdanis/custom-bootstrap-cards" target="_blank"><i class="fa fa-github"></i></a></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.card-custom {
overflow: hidden;
min-height: 450px;
box-shadow: 0 0 15px rgba(10, 10, 10, 0.3);
}
html {
font-size: 14px;
}
.container {
font-size: 14px;
color: #666666;
font-family: "Open Sans";
background-image: url("https://images.unsplash.com/photo-1438109491414-7198515b166b?q=80&fm=jpg&s=cbdabf7a79c087a0b060670a6d79726c");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bottom{
position:absolute;
bottom:20px;
}
.card-custom-img {
height: 200px;
min-height: 200px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-color: inherit;
}
/* First border-left-width setting is a fallback */
.card-custom-img::after {
position: absolute;
content: '';
top: 161px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-top-width: 40px;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 545px;
border-left-width: calc(575px - 5vw);
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: inherit;
}
.card-custom-avatar img {
border-radius: 50%;
box-shadow: 0 0 15px rgba(10, 10, 10, 0.3);
position: absolute;
top: 100px;
left: 1.25rem;
width: 100px;
height: 100px;
}
