'Why adding bootstrap cards to the row doesn't appear as a row but vertically?

I have added cards to the row and then col-sm-3 but the cards appears in the vertical from and not as a row columns and also it appear on the right of screen not left.

 <ng-container *ngFor="let subjectState of filterSubjects">
    <div class="row">
     <div class="col-sm-3">
       <div (click)="loadData(subjectState?.Subject.Id)" class="card" style="width: 18rem;">
         <img [src]="subjectState?.Subject?.HeaderImage | fullPath" alt="Forest" class="card-img-top    float-end">
          <div class="card-body">
           <h5 class="card-title">{{subjectState?.Subject?.SubjectName | trimText: 50}}</h5>
          <h6 dir="ltr" class="card-text">{{subjectState?.Subject?.CreateDate | date: 'dd/MM/yyyy'}}  </h6>
         </div>
       </div>
     </div>
   </div>
 </ng-container>

scss

  .card {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   padding: 16px;
   text-align: center;
   background-color: #f1f1f1;
   width: 16rem;
   height: 13rem;
  }

I tried adding row and columns and also did the card css part but its still in vertical. How do I arrange them in row to the left?

htmlcssangulartwitter-bootstrapbootstrap-4


Solution 1:[1]

Looking at your code, it seems that you are creating a new row with one column col-sm-3 for each loop over filterSubjects. Try moving your row above the loop.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Quentin Grisel

Related Questions