How to center last two cards in bootstrap?

  angular, angular-ui-bootstrap, bootstrap-4, html

enter image description here

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>

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.