title: How to build a dynamic grid and only show three columns in a row (JSF 2.2 and BootsFaces)
body: <p>I am trying to layout a page with Bootsfaces and JSF 2.2.  I like to show only three column in a row and then start new row but don't know, how to implement this. </p>
  
  <pre><code>&lt;h:form&gt;
      &lt;b:container&gt;
          &lt;b:row&gt;
          &lt;ui:repeat value="#{ClientBean4.custs}" var="custs"&gt;
              &lt;b:column col-md="4"&gt;&lt;h:outputText id="output" value="#{ClientBean4.counter}" /&gt; &lt;/b:column&gt;
              &lt;h:panelGroup rendered="#{ClientBean4.counter == 0}"&gt;
                  &lt;/b:row&gt;&lt;b:row&gt;
              &lt;/h:panelGroup&gt;
          &lt;/ui:repeat&gt;
          &lt;/b:row&gt;
      &lt;/b:container&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <p>after a long time, I wrote above code, but it's givng error like 'h:panelgroup' should be properly closed. It's giving meaning, that I started panelGroup and then closing a row, starting a new row, and then close panelGroup.</p>
  
  <p>So, Is anyone have idea, how to implement a layout, where a row will have three columns (showing customer's object details per column), then close the row and start a new row. obvisouly, I dont know, how many objects will be in the list. </p>