title: Centering and filling the page with bootstrap grid and ng-repeat elements
body: <p>I have several elements I want to display on a page, and I am using Angular's ng-repeat to do it. I want to display it by having a 3x3 column, so I am using Bootstrap's col-md-4. My HTML is as follows:</p>
  
  <pre><code>&lt;div ng-controller="resourcesController"&gt;
      &lt;div class="main-body"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="resources"&gt;
                  &lt;div ng-repeat="org in orgs" class="col-md-4"&gt;
                      &lt;a href={{org.url}} target="_blank"&gt;&lt;img src={{org.icon}}&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, the elements are appearing like so:</p>
  
  <p><img src="https://i.imgur.com/1CWrfIG.png" alt="my webpage"></p>
  
  <p>How can I center the elements and spread them over evenly across the page while using ng-repeat? Thank you!</p>