title: How do I dynamically create rows and columns using Bootstrap/Angular2?
body: <p>I need to use *ngFor and content inserted from a component into my DOM depending on dynamic size of an array of contents. </p>
  
  <p>I am trying to achieve this structure: A row with 3 elements on lg-12, 2 elements on md/sm and 1 element on xs without knowing in advance how many event items will be drawn out of a list from the backend query. Coded statically for example it looks like this for one line, but if I add a second line then when it collapses to 2 on md/sm there is 2 elements on one line, one element on the second line, and repeating instead of 2 elements on each line so it looks dumb. </p>
  
  <pre><code>  &lt;div class="eventList container-fluid" id="eventList"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-12"&gt;
                    &lt;app-event [event]="event"&gt;&lt;/app-event&gt;
                    &lt;app-event [event]="event"&gt;&lt;/app-event&gt;
                    &lt;app-event [event]="event"&gt;&lt;/app-event&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Where each element app-event element is: </p>
  
  <pre><code>  &lt;div class="col-md-4 col-sm-6 col-xs-12 single-event-item eventResult"&gt; 
      ... content
      &lt;/div&gt;
  </code></pre>