Align bootstrap columns - html

Question

On my website (team section) I have something like this 6x :
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="team-member">
<div class="image" style="background-image:url(../images/female-employee.png)">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
The issue is that I don't know how to align the last 2 ones to the middle of the bag, like on the illustration below.
How can I achieve this?
Many thanks,

Answer 1

Here is a bootply: http://www.bootply.com/oTea5I7wZX
On the last row with offseting columns :
<div class="row">
<div class="col-xs-6 col-md-4 col-md-offset-2">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
</div>
</div>
Full HTML
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4 col-md-offset-2">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
</div>
</div>

Answer 2

You can use flex-box for last row as below:
<div class='row'>
<div class="team-member align-center">
<div class="image" style="background-image:url(../images/female-employee.png)">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
<div class="team-member align-center">
<div class="image" style="background-image:url(../images/female-employee.png)">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
and add the class align-center as below:
.align-center {
display: flex;
justify-content: space-around;
}