Incorrect responsive images aspect ratio in bootstrap 4 - css

Question

I want to put a text between two images in bootstrap grid. But images in row sections change their aspect ratio(original is 1:1) and do not resize correctly.
(Codepen: https://codepen.io/Oktocorp/pen/yMxpwX?editors=1100)
<div class="container">
<div class="row">
<img class="img-fluid rounded-circle col-lg-3 col-md-3 col-sm-12" src="https://image.ibb.co/dEZA5a/true_detective1.jpg" alt="true_detective1">
<p class="text-center col-lg-6 col-md-6 col-sm-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img class="img-fluid rounded-circle col-lg-3 col-md-3 col-sm-12" src="https://image.ibb.co/jRigBF/true_detective2.jpg" alt="true_detective2">
</div>
</div>

Answer 1

Don't put the grid column classes on the img and p tags. Rather wrap those in div elements with the desired bootstrap classes. The reason for this is that bootstraps col-* classes need to use width and max-width properties so they are going override your css on img-fluid class. If you for example use col-md-6 then that element's width needs to be 50% of its parent - it cannot be both 50% and 100% at the same time. So you want to make your img elements children of those.
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-3 col-lg-3">
<img class="img-fluid rounded-circle" src="https://image.ibb.co/dEZA5a/true_detective1.jpg" alt="true_detective1">
</div>
<div class="col-lg-6 col-md-6 col-md-6 ">
<p class="text-center ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-sm-12 col-md-3 col-lg-3">
<img class="img-fluid rounded-circle" src="https://image.ibb.co/jRigBF/true_detective2.jpg" alt="true_detective1">
</div>
</div>
</div>
Also for your img-fluid class change the css to:
.img-fluid {
width: 100%;
height: auto;
}

Answer 2

The grid card columns are meant to be used on images and paragraphs. They're meant to be containers of content.
http://www.codeply.com/go/5sip6gvYFE
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 text-center">
<img class="img-fluid rounded-circle" src="https://image.ibb.co/dEZA5a/true_detective1.jpg" alt="true_detective1">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 text-center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 text-center">
<img class="img-fluid rounded-circle" src="https://image.ibb.co/jRigBF/true_detective2.jpg" alt="true_detective2">
</div>
</div>
</div>