Get button below each image in Angular *ngFor - html

Question

I tried lots of methods to get the button below each image from ngFor loop in angular 10 but it populates the button next to the image not in each image it's showing as a list I attached the image output also. This is the code that I tried.
CSS
.container {
position: relative;
text-align: center;
}
.original {
width: 250px;
height: 250px;
float: left;
margin: 1.66%;
transition-duration: 0.3s;
border-radius: 15px;
}
Html
<ng-container *ngFor="let img of imageData">
<div class="container">
<img class="original" [alt]="img.Name"
src="https://localhost:44349/{{img.ImagePath}}"
width="350" height="350"/>
</div>
<button type="submit" (click)="deleteImage(img.Id)" class="btn btn-danger"><i
class="far fa-trash-alt"></i>
Remove
</button>
</ng-container>

Answer 1

Try this markup, move the closing div after the button element:
<ng-container *ngFor="let img of imageData">
<div class="container card">
<img class="original" [alt]="img.Name"
src="https://localhost:44349/{{img.ImagePath}}"
width="350" height="350"/>
<button type="submit" (click)="deleteImage(img.Id)" class="btn btn-danger"><i
class="far fa-trash-alt"></i>
Remove
</button>
</div>
</ng-container>
with new css class using flexbox:
.card {
display: flex;
flex-direction: column;
}
UPDATE
according to some css classes like btn, btn-danger I presume bootstrap used.
You can wrap the whole thing inside a div with these classes:
<div class="d-flex flex-wrap">
General info and docs
Stackblitz demo