title: AngularJS ng-repeat and bootstrap to display items in colums from DB
body: <p>I'm trying to adapt a template to my MEAN app, and I want to display some info I load from the DB in 3 columns. The problem is, when using ng-repeat, it only displays the data in one column.</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;div class="row mt-5"&gt;
    &lt;div ng-repeat="woman in women"&gt;
      &lt;div class= "col-md-4"&gt;
          &lt;!--Card--&gt;
            &lt;div class="card"&gt;
                &lt;!--Card image--&gt;
                &lt;img class="img-fluid" src="{{woman.image_url}}" alt="{{woman.name}}"&gt;
                &lt;!--Card content--&gt;
                &lt;div class="card-body"&gt;
                    &lt;!--Title--&gt;
                    &lt;h4 class="card-title"&gt;{{woman.name}}&lt;/h4&gt;
                    &lt;!--Text--&gt;
                    &lt;p class="card-text"&gt; &lt;h5&gt;{{woman.field}}&lt;/h5&gt; &lt;br&gt; {{woman.job}}&lt;/p&gt;
                    &lt;a href="#!/women/details/{{woman._id}}" class="btn btn-primary"&gt;Learn more&lt;/a&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;!--/.Card--&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm forcing the images to have the same size, but I would also like to display just part of the pictures in this view, and then in the detailed one, the full image. </p>
  
  <p>Thank you!</p>