My goal is to showcase objects in 3 columns using Bootstrap 4. However, when I implement the code provided, the objects are only displayed in a single column, as shown here: example of 1 column layout.
What I actually want is for the objects to be arranged like this (or something similar): sample layout with 3 columns.
<div class="row-mt-5">
<div ng-repeat="woman in women">
<div class= "col-lg-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">{{woman.name}}</h4>
<!--Text-->
<p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
<a href="#!/women/details/{{woman._id}}" class="btn btn-primary">Learn more</a>
</div>
</div>
<!--/.Card-->
</div>
</div>
</div>
I am eager to master the utilization of Bootstrap classes for object positioning.