Center n-divs in row (Bootstrap)

Question

I have a Bootstrap row containing a variable amount of divs and they need to be centered relative to their parent row. The html is set like this so far:

<div class="row proj-container">

    <div class="proj col-md-4 col-xs-12"></div>

</div>

With javascript I clone and append inside .proj-container a variable number of .proj. It works fine and if the .proj are more than 3 they wrap correctly onto other lines thanks to grid disposition. What I am not being able to achieve is the centering of this sets of divs inside of their parent.

• assigning ".text-center" to parent doesn't work
• text-align on parent and inline-block on children doesn't work
• making parent flex and justify:space-around achieves centering the children but overrides the grid system (col-md-4) and they won't wrap if more than three or on smaller devices...

Any idea on how to style this in order to achieve centering AND wrapping of the divs?

Answer 1

Here is one more solution. Look at jsFiddle.

.proj {
  display: inline-block;
  height: 10px;
  border: 1px solid red;
  margin: 0 -2px;
  float: none;
}

HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row proj-container text-center">
    <div class="proj col-md-4 col-xs-12"></div>
    <div class="proj col-md-4 col-xs-12"></div>
    <div class="proj col-md-4 col-xs-12"></div>
    <div class="proj col-md-4 col-xs-12"></div>
    <div class="proj col-md-4 col-xs-12"></div>
  </div>
</div>

Answer 2

You can try the following which should center the grid columns

.project-container {
   text-align: center; /* set all inline elements to be centered */
}

.project-container .proj {
  display: inline-block; /* set the columns to inline blocks so they are centered */
  float: none;
}