Centre bootstrap divs in the middle of an image - html

Question

Hi guys so i have a background image with 5 small divs in it. I was wondering what is the best way to center the 5 divs in the middle of the image. I for some reason cant find a way to put it in the middle without using margin-left: 300px or something like this. I tried to use div align in the row but that doesn't work is well
HTML:
<div class="parallax2">
<div class="info1">
<span class="border"></span>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-2" >
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-lightbulb-o"></i>
<h4>IDEA</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-bank"></i>
<h4>DESIGN</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-comments-o"></i>
<h4>DEVELOP</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-desktop"></i>
<h4>TEST</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-rocket"></i>
<h4 id="three" >LAUNCH</h4>
</div>
</div>
<!-- work_process -->
</div>
</div>
</div>
</div>
CSS:
.parallax2 {
background-image: url(https://wallpapercave.com/wp/e7KiEL3.jpg);
min-height: 400px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 10px 20px;
}
.work_process {
position: relative;
text-align: center;
margin: 0 auto;
}
.work_process .work_process-box {
outline: 4px solid #FFFFFF;
border-radius: 50%;
height: 120px;
margin: 2em auto 3em;
padding: 16px 10px;
width: 120px;
}
.work_process-box i {
font-size: 32px;
line-height: 52px;
width: 52px;
color: #FFFFFF;
}
.work_process-box h4 {
font-weight: 400;
margin: 0;
color: black;
}
I tried to add Margin-left: 200px in the work process class but i wasent sure if this is the correct way to do it.
Any help would be great
Link

Answer 1

#RonTheOld, you can turn your row into a flexbox by giving it the diplay:flex; property and 'justify-content: center' property to center the items in the flexbox.
I've done this as an inline style attribute on the row element for your code.
Here's a codeply project with the code in action.