How to wrap a series of icons after three - html

Question

I have downloaded a bootstrap theme:
Info: http://startbootstrap.com/template-overviews/stylish-portfolio
Demo: http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio
On the page 'our services', it shows 4 circles with font-awesome icons. I have added a 2 more circles and font-awesome icons to that. But i only added 2... So on the page, its kinda awkward, a whole line of circles and icons, then a smaller line of just 2 right under the other circles/icons.. I want their to be 3 on each line and to be centered.
I looked through the css code, but I can't find anything. Here is the code
.service-item {
margin-bottom: 30px;
}
/* Callout */
.callout {
display: table;
width: 100%;
height: 400px;
color: #fff;
background: url(../img/callout.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
<!-- Services -->
<!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
<section id="services" class="services bg-primary">
<div class="container">
<div class="row text-center">
<div class="col-lg-10 col-lg-offset-1">
<h2>Our Services</h2>
<hr class="small">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-cloud fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-compass fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flask fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-shield fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>

Answer 1

Columns add up to 12 so 4 columns at md-3 you want 6 columns at md-4.

Answer 2

If you inspect the document you'll see this common Bootstrap markup structure:
<div class="row">
<div class="col-md-3 col-sm-6">
...
</div>
<div class="col-md-3 col-sm-6">
...
</div>
<div class="col-md-3 col-sm-6">
...
</div>
<div class="col-md-3 col-sm-6">
...
</div>
</div>
This results in the icons being arranged 2 to a row for mobile, and 4 to a row at larger screen sizes. You'll need to modify the template files per the Bootstrap grid docs to this:
<div class="row">
<div class="col-xs-4">
...
</div>
<div class="col-xs-4">
...
</div>
<div class="col-xs-4">
...
</div>
<div class="col-xs-4">
...
</div>
<div class="col-xs-4">
...
</div>
<div class="col-xs-4">
...
</div>
</div>
This would result in each icon section taking one-third of the width of the row, and then they'd wrap to a new line.
You could also beat it into submission with CSS overrides, but I wouldn't recommend it.