I write application in angular, using bootstrap. I want the last 2 cards to be in the middle, instead of to the left. Now it looks like one last card is missing. I want to correct it. How to do it?
html code:
<div class="container" style="padding-top:1.1cm">
<div class="card-columns">
<div class="card text-center" [routerLink]="['/special/arrangements-salon']">
<div class="card-body">
<img [src]="salon" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">salon</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-study']">
<div class="card-body">
<img [src]="study" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">gabinet</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-bedroom']">
<div class="card-body">
<img [src]="bedroom" height="100" width="100"> <br><label>
<h5 style="padding-top:6mm">sypialnia
</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-kitchen']">
<div class="card-body">
<img [src]="kitchen" height="100" width="100"> <br><label>
<h5 style="padding-top:6mm">kuchnia
</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-bathroom']">
<div class="card-body">
<img [src]="bathroom" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">łazienka</h5>
</label>
</div>
</div>
</div>
</div>
add d-flex align-items-center justify-content-center to parent => card-columns div or you can add mx-auto to last div
<div class="container" style="padding-top:1.1cm">
<div class="card-columns d-flex align-items-center justify-content-center">
<div class="card text-center" [routerLink]="['/special/arrangements-salon']">
<div class="card-body">
<img [src]="salon" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">salon</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-study']">
<div class="card-body">
<img [src]="study" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">gabinet</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-bedroom']">
<div class="card-body">
<img [src]="bedroom" height="100" width="100"> <br><label>
<h5 style="padding-top:6mm">sypialnia
</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-kitchen']">
<div class="card-body">
<img [src]="kitchen" height="100" width="100"> <br><label>
<h5 style="padding-top:6mm">kuchnia
</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-bathroom']">
<div class="card-body">
<img [src]="bathroom" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">łazienka</h5>
</label>
</div>
</div>
</div>
</div>