divide three images equally and image name too appear their recpective image - html

Question

Actually the image is 450*450pixels (both height and width is 15.88cm)
so i want to adjust them in equally to screen please see my screen shot and as you see the name also came in the bottom of each image the name should not so much big and small too it just fit with the image
img {
padding float: left;
border-radius: 150%;
}
<h1>ACTOR</h1>
<img src="img/chadwick.jpg" alt="chadwick" height="15%" width="15%">
<img src="img/michael.jpg" alt="michel" height="15%" width="15%">
<img src="img/lupita.jpg" alt="lupita" height="15%" width="15%">

Answer 1

Bootstrap 3 solution
HTML structure
<div class="row">
<div class="col-...">
<img ...>
<h5>...</h5>
</div>
</div>
Added padding-left and padding-right to each column to make space. Added margin-top to <h5> (Could be something else).
Example
.my-row>div {
padding: 0 7vw;
}
.my-row h5 {
margin-top: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row my-row">
<div class="col-xs-4 text-center">
<img src="http://placehold.it/450x450" alt="" class="img-responsive img-circle">
<h5>Name 1</h5>
</div>
<div class="col-xs-4 text-center">
<img src="http://placehold.it/450x450" alt="" class="img-responsive img-circle">
<h5>Name 2</h5>
</div>
<div class="col-xs-4 text-center">
<img src="http://placehold.it/450x450" alt="" class="img-responsive img-circle">
<h5>Name 3</h5>
</div>
</div>

Answer 2

Bootstrap 4 solution
<div class="row text-center">
<div class="col">
<div><img src="https://via.placeholder.com/450x450" alt="chadwick"></div>
<div>chadwick</div>
</div>
<div class="col">
<div><img src="https://via.placeholder.com/450x450" alt="michel"></div>
<div>michel</div>
</div>
<div class="col">
<div><img src="https://via.placeholder.com/450x450" alt="lupita"></div>
<div>lupita</div>
</div>
</div>