<div class="row no-gutters">
<div class="col-12 col-md-5 d-flex">
<a class="d-block overflow-hide" href="/">
<div class="card">
<img class="card-img img-fluid" src="/ImaginePeace_17124094261168052937_900x540.jpg">
</div>
</a>
</div>
<div class="col-12 col-md-7 d-flex">
<div class="row no-gutters">
<div class="col-6 col-md-4">
<a href="/" class="d-flex h-100">
<div class="card">
<img class="img-fluid card-img h-100" src="/BlackpoolTowerBallroom_714719417607972198_400x240.jpg">
</div>
</a>
</div>
<div class="col-6 col-md-4">
<a href="/" class="d-flex h-100">
<div class="card">
<img class="img-fluid card-img h-100" src="/DriftwoodPirate_15993172467744950522_400x240.jpg">
</div>
</a>
</div>
<div class="col-6 col-md-4">
<a href="/" class="d-flex h-100">
<div class="card">
<img class="img-fluid card-img h-100" src="/CalidrisCanutus_10022354362427632830_400x240.jpg">
</div>
</a>
</div>
<div class="col-6 col-md-4">
<a href="/" class="d-flex h-100">
<div class="card">
<img class="img-fluid card-img h-100" src="/ViewofLiberty_3683339547473353821_400x240.jpg">
</div>
</a>
</div>
<div class="col-6 col-md-4">
<a href="/" class="d-flex h-100">
<div class="card">
<img class="img-fluid card-img h-100" src="/MonumentFountain_4961822624051255351_400x240.jpg">
</div>
</a>
</div>
<div class="col-6 col-md-4">
<a href="/" class="d-flex h-100">
<div class="card">
<img class="img-fluid card-img h-100" src="/Plexus_6357385199072384560_400x240.jpg">
</div>
</a>
</div>
</div>
</div>
</div>Expect Result
But Current Result
Solution
to fix just add width:100% to .card-img .
https://github.com/twbs/bootstrap/blob/v4-dev/scss/_card.scss#L123
.card-img {
width:100%;
}
Expect Result
But Current Result
Solution
to fix just add
width:100%to.card-img.https://github.com/twbs/bootstrap/blob/v4-dev/scss/_card.scss#L123