I'm looking for the optimal method of centering a group of responsive bootstrap columns inside a row. 
[![Desired Result](https://i.stack.imgur.com/6wG8i.jpg)](https://i.stack.imgur.com/6wG8i.jpg)

```
     <li class="row hazRow">
         //center this to the middle of the row
         <div class="col-xs-3">
             <img class="icon" href="#" title="icon" src="img/table/icon.svg">
         </div>
         <div class="col-xs-4">
             <p>Title</p>
         </div>
         //end center
     </li>

```

I was thinking of using just blank col either side, but feels like a waste and would not be able to center odd column(s) widths like 7. 

I also tried wrapping the columns in a div with class of `.center-block` and `.text-center`, but this did not change the positions.

* Should I abandon responsive bootstrap grids for this?
* How can I center these columns?