bootstrap CSS: center any col- that overflows a line - css

Question

As can be seen in this fiddle, I have series of columns that are nested in a single row and designed to overflow onto as many new lines as necessary.
Since each col-* has the property align: left; from Bootstrap, cols that overflow onto a new line stay left aligned.
Visually, I'd like to have "incomplete" lines have divs that are centered, like this fiddle. But, these col- divs are created dynamically, so I can't just use offsets or additional rows to fix.
Any ideas on how to accomplish this? Thanks in advance.

Answer 1

Very easy. First, you change your HTML and add some special class just to make sure you don't affect the columns in other places of your layout. Since you have app-style, let's use that for the row, and let's add the myCentre class name to the xs-4 columns. Like this:
<div class="row app-style">
<div class="col-xs-4 myCentre">
<div class="box-btn-reports">
<p>1</p>
</div>
</div>
<div class="col-xs-4 myCentre">
<div class="box-btn-reports">
<p>2</p>
</div>
</div>
<div class="col-xs-4 myCentre">
<div class="box-btn-reports">
<p>3</p>
</div>
</div>
<div class="col-xs-4 myCentre">
<div class="box-btn-reports">
<p>4</p>
</div>
</div>
</div>
<div class="row app-style">
<div class="col-xs-4 myCentre">
<div class="box-btn-reports">
<p>1</p>
</div>
</div>
<div class="col-xs-4 myCentre">
<div class="box-btn-reports">
<p>2</p>
</div>
</div>
<div class="col-xs-4 myCentre">
<div class="box-btn-reports">
<p>3</p>
</div>
</div>
<div class="col-xs-4 myCentre">
<div class="box-btn-reports">
<p>4</p>
</div>
</div>
<div class="col-xs-4 myCentre">
<div class="box-btn-reports">
<p>Another col just because I can</p>
</div>
</div>
</div>
Now, we can use some extremely simple CSS. Basically, we're removing Bootstrap styles to use old school responsive approach: text-align:center for container, text-align:left for item elements, nothing new:
.app-style{text-align:center;}
.myCentre{display:inline-block;
float:none;
text-align:left;
margin-right:-4px;
vertical-align:top;}
.box-btn-reports {
text-align: center;
width: 100%;
margin-top: .5em;
margin-bottom: .5em;
border: 1px solid #888888;
border-radius: 8px;}
p {
padding: .1em;
font-size: 1.25em;
line-height: 150%;
}
and now you can [see the fiddle here] and how those columns are happily centered1