Space out divs automatically in wrapper based on quantity - html

Question

I have a Bootstrap website that has a div wrapper and then 1 - 6 possible divs in side. These are 200px wide and need to be spaced equally inside.
<div class="container">
<div class="row">
<div class="wasps_home_footer_blocks_container">
<div class="wasps_home_footer_block col-md-2 ">
<figure> <img src="test.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<div class="wasps_home_footer_block col-md-2 ">
<figure> <img src="test.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<div class="wasps_home_footer_block col-md-2 ">
<figure> <img src="test.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<div class="wasps_home_footer_block col-md-2 ">
<figure> <img src="test.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
</div>
</div>
CSS:
.wasps_home_footer_blocks_container {
width: 100%;
margin: auto;
margin-top: auto;
margin-top: 20px;
}
.wasps_home_footer_block {
width: 200px;
text-align: center;
}
This shows the four divs but left aligned in the .wasps_home_footer_blocks_container div.
The wasps_home_footer_block divs need to be in the middle of the containing div equally spaced apart. (See attached image)

Answer 1

Better to use Flexbox instead of Bootstrap Grid, in this case.
You can remove the commented code to see additional blocks added.
.wasps_home_footer_blocks_container {
display: flex;
width: 100%;
margin: auto;
margin-top: auto;
justify-content: center;
}
.wasps_home_footer_block {
width: 200px;
margin: 20px;
text-align: center;
max-height: 100px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="wasps_home_footer_blocks_container">
<div class="wasps_home_footer_block">
<figure>
<img src="http://www.martialartsmoviejunkie.com/wp-content/uploads/2014/08/Drunken-Master.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<div class="wasps_home_footer_block">
<figure>
<img src="https://s3.drafthouse.com/images/made/drunken-master-1_758_426_81_s_c1.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<div class="wasps_home_footer_block">
<figure>
<img src="http://blackbeltmag.com/wp-content/uploads/DrunkenMasterII1.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<!--UNCOMMENT ME-->
<!-- <div class="wasps_home_footer_block">
<figure> <img src="http://blackbeltmag.com/wp-content/uploads/DrunkenMasterII1.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<div class="wasps_home_footer_block">
<figure> <img src="http://blackbeltmag.com/wp-content/uploads/DrunkenMasterII1.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div> -->
<div class="wasps_home_footer_block">
<figure>
<img src="http://media1.break.com/dnet/media/450/925/2925450/7-martial-arts-movies-you-need-to-see-image-7.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
</div>
</div>