<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="xt-row" class="row"> <div class="xt-country col-sm-4"> <div class="col-md-5"> <div class="ratio img-responsive img-circle" style="background-image: url(https://karinaharrisorganics.com/wp-content/uploads/2016/03/Africa.png);"></div> </div> <h3>Africa</h3> </div> <div class="xt-ingr col-sm-8"> <div class="col-sm-2"> <div class="ratio img-responsive img-circle" style="background-image: url(https://karinaharrisorganics.com/wp-content/uploads/2016/03/Africa.png);"></div> <h3>Africa</h3> </div> <div class="col-sm-2"> <div class="ratio img-responsive img-circle" style="background-image: url(https://karinaharrisorganics.com/wp-content/uploads/2016/03/Africa.png);"></div> <h3>Africa</h3> </div> <div class="col-sm-2"> <div class="ratio img-responsive img-circle" style="background-image: url(https://karinaharrisorganics.com/wp-content/uploads/2016/03/Africa.png);"></div> <h3>Africa</h3> </div> <div class="col-sm-2"> <div class="ratio img-responsive img-circle" style="background-image: url(https://karinaharrisorganics.com/wp-content/uploads/2016/03/Africa.png);"></div> <h3>Africa</h3> </div> </div> </div> <div id="xt-row" class="row"> <div class="xt-country col-sm-4"> <div class="col-md-5"> <div class="ratio img-responsive img-circle" style="background-image: url(https://karinaharrisorganics.com/wp-content/uploads/2016/03/Africa.png);"></div> </div> <h3>Africa</h3> </div> <div class="xt-ingr col-sm-8"> <div class="col-sm-2"> <div class="ratio img-responsive img-circle" style="background-image: url(https://karinaharrisorganics.com/wp-content/uploads/2016/03/Africa.png);"></div> <h3>Africa</h3> </div> <div class="col-sm-2"> <div class="ratio img-responsive img-circle" style="background-image: url(https://karinaharrisorganics.com/wp-content/uploads/2016/03/Africa.png);"></div> <h3>Africa</h3> </div> <div class="col-sm-2"> <div class="ratio img-responsive img-circle" style="background-image: url(https://karinaharrisorganics.com/wp-content/uploads/2016/03/Africa.png);"></div> <h3>Africa</h3> </div> <div class="col-sm-2"> <div class="ratio img-responsive img-circle" style="background-image: url(https://karinaharrisorganics.com/wp-content/uploads/2016/03/Africa.png);"></div> <h3>Africa</h3> </div> </div> </div> </div>

#xt-row{ margin:20px 0px; border-bottom: 1px solid #AFAFAF; } .xt-country{ border-right: 1px solid #AFAFAF; } .xt-country h3{ margin-top:40px; text-align:center; } .xt-ingr h3{ text-align:center; } .ratio { background-position: center center; background-repeat: no-repeat; background-size: cover; height: 0; padding-bottom: 100%; position: relative; width: 100%; } .img-circle { border-radius: 50%; } .img-responsive { display: block; height: auto; max-width: 100%; }