Hey there, hope everyone is well. I'm attempting to achieve a layout similar to the one in this image:
https://i.sstatic.net/Y6wa4.png
The text should be positioned on the right side of the image, without a large white space separating them. As you can see, there is a significant gap between the text and the image in the second row.
Below is the code I have been using:
.size_picture {
max-width:10%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Test</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e2808d8d969196908392a2d6ccd7ccd1"></a>/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container" >
<div class="row mt-5" style="padding-top: 70px;">
<div class="col-md-2 how-img">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" class="rounded-circle img-fluid size_picture" alt=""/>
</div>
<div class="col-md-10 mt-5">
<h4><i>Founder</i></h4>
<p class="text-muted">Hello, my name is Test, and I'm happy to present you my project !</p>
</div>
</div>
<div class="row">
<div class="col-md-10 mt-5">
<h4><i>Associate</i></h4>
<p class="text-muted">Hello, my name is Test, and I'm happy to present you my project !</p>
</div>
<div class="col-md-2 how-img">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" class="rounded-circle img-fluid size_picture" alt=""/>
</div>
</div>
</div>
</body>
</html>Kind regards,