I have a piece of code that uses Boostrap 4 and some customization with CSS, it works fine, but when I try to add a carusel so as not to show a single image, it fails me, because the image is not shown completely, only a part of she and with the appearance of zoom.
Code that works well:
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="property shadow-sm p-3 mb-5 bg-white rounded">
<a href="#" class="property-img">
<div class="img-fade"></div>
<div class="property-tag badge badge-success"><h5>Nuevo</h5></div>
<div class="property-price">$150,000</div>
<img src="https://loremflickr.com/cache/resized/906_28355846338_3e54c3bd3f_320_240_nofilter.jpg" alt="">
</a>
<div class="property-content">
<div class="property-title">
<h4><a href="#">Modern Family Home</a></h4>
<p class="property-address"><i class="fas fa-map-marker-alt"></i> 123 Smith Dr, Annapolis, MD</p>
</div>
<table class="property-details">
<tbody><tr>
<td><i class="fa fa-bed"></i> 3 Hab.</td>
<td><i class="fa fa-tint"></i> 2 Baños</td>
<td><i class="fa fa-expand"></i> 105 m2</td>
</tr>
</tbody></table>
</div>
<div class="property-footer">
<span class="left"><i class="fa fa-calendar-o icon"></i> 5 days ago</span>
<span class="right">
<a href="#"><i class="far fa-heart"></i></a>
<a href="#"><i class="fa fa-share-alt"></i></a>
</span>
<div class="clear"></div>
</div>
</div>
</div>
Code with the carusel that gives the problem:
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="property shadow-sm p-3 mb-5 bg-white rounded">
<a href="#" class="property-img">
<div class="img-fade"></div>
<div class="property-tag badge badge-success"><h5>Nuevo</h5></div>
<div class="property-price">$150,000</div>
<div id="carouselExampleControls" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="image-fluid" src="https://loremflickr.com/320/240/realestate/all" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://loremflickr.com/cache/resized/906_28355846338_3e54c3bd3f_320_240_nofilter.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://loremflickr.com/320/240/realestate/" alt="Third slide">
</div>
</div>
<p class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</p>
<p class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</p>
</div>
</a>
<div class="property-content">
<div class="property-title">
<h4><a href="#">Modern Family Home</a></h4>
<p class="property-address"><i class="fas fa-map-marker-alt"></i> 123 Smith Dr, Annapolis, MD</p>
</div>
<table class="property-details">
<tbody><tr>
<td><i class="fa fa-bed"></i> 3 Hab.</td>
<td><i class="fa fa-tint"></i> 2 Baños</td>
<td><i class="fa fa-expand"></i> 105 m2</td>
</tr>
</tbody></table>
</div>
<div class="property-footer">
<span class="left"><i class="fa fa-calendar-o icon"></i> 5 days ago</span>
<span class="right">
<a href="#"><i class="far fa-heart"></i></a>
<a href="#"><i class="fa fa-share-alt"></i></a>
</span>
<div class="clear"></div>
</div>
</div>
</div>
Everything is inside a DIV with the Row class:
<div class="row">