Here's a demonstration that utilizes the margin property rather than padding.
Please take note of the following issues in your code:
- You have duplicate IDs (
id="imgUNcover") on the image tags.
- There are two sets of classes applied to the image tags.
I've also included the img-fluid class to ensure the images fill the available space. Finally, remember to utilize the calc() function in your CSS to accurately calculate the height of the card's body considering the margin's height is added to the content box's height.
.card {
height: 400px;
overflow: hidden;
}
.img-container {
flex: 1 0 30% !important;
max-height: 30% !important;
overflow: visible;
border: none !important;
text-align: center;
}
.card-body {
flex: 1 0 70% !important;
max-height: calc(70% - 2.5rem) !important;
overflow: auto;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
padding-top: 0!important;
padding-bottom: 0!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-3 mb-3 mb-md-3">
<div class="card">
<div class="img-container">
<a href="#">
<img src="https://qph.fs.quoracdn.net/main-qimg-fdaa32b9bffc30131e56956e4bc1e9e4.webp" alt="blabla" class="card-img-top img-fluid">
</a>
</div>
<div class="card-body">
<a href="#" class="card-title cardTitleLink">
<h1 class="cardTitleUN">
Some title
</h1>
</a>
<p class="card-text text-muted">blabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalbla
</p>
<a href="#">Continue Lendo</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3 mb-3 mb-md-3">
<div class="card">
<div class="img-container">
<a href="#">
<img src="https://www.dailydot.com/wp-content/uploads/2018/05/crush.jpg" alt="blabla" class="card-img-top img-fluid">
</a>
</div>
<div class="card-body">
<a href="#" class="card-title cardTitleLink">
<h1 class="cardTitleUN">
Some title
</h1>
</a>
<p class="card-text text-muted">blabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalbla
</p>
<a href="#">Continue Lendo</a>
</div>
</div>
</div>
</div>
</div>