htmlangularbootstrap-4angular-ui-bootstrap

How to center last two cards in bootstrap?


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>

Solution

  • 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>