What you’re looking for is text-align css property. Bootstrap provides text-right css class which applies text-align:right; to the element it’s part of.
In your example, your second row elements require text-right class. Refer to the example below.
MDN “text-align” reference
.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/[email protected]/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 text-right">
<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>
Hope you’re all fine.
What I’m trying to achieve is something like this picture :
The text need to be on the right side of the picture, without a big white space between it. AS you can see, there is a big space in the second row between the text and the picture
Here is my code :
.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/[email protected]/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>
Cordially,
It’s doing exactly what you are telling it to do and is exactly what you want. Your text elements are 10 columns wide, and your image containers are 2 columns wide.
I don’t want the white space between the text and the picture, but someone did help me, thanks
Looks perfect, thanks. Just another thing, as you can see the picture are quite big when you shrink the page. Its because the css style on the html, but how can I shrink the picture then ?
