title: Bootstrap grid dynamic columns
body: <p>I have the following table on my page:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td ng-repeat="Type in Types"&gt;    
                  &lt;img ng-src="../../Images/{{Type.TypeImg}}" ng-click="GoNext(Type.TypeId)" alt="{{Type.TypeName}}" /&gt;
          &lt;/td&gt;
  
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I want to use bootstrap grid instead of the table. So if there were 3 images on the page I'd have:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt; &lt;/div&gt;
      &lt;div class="col-md-4"&gt; &lt;/div&gt;
      &lt;div class="col-md-4"&gt; &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But since the number of images is dynamic ( although it is never greater then 12), i cannot use fixed numbers in col-md*. So I'd have to do something like this:</p>
  
  <pre><code>&lt;div class="row" ng-repeat="Type in Types"&gt;
      &lt;div class="col-md-{{12 / Types.length}}"&gt;
          &lt;img ng-src="../../Images/{{Type.TypeImg}}" ng-click="GoNext(Type.TypeId)" alt="{{Type.TypeName}}" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But now I have each image in its own row, instead of in a column(one under the another). How do i get them all in one line?</p>