How to center last two cards in bootstrap?

Question

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>

ah right then you cannot align the last two centre as it uses css columns and not flex - meaning the cards will be kept in their columns. You probably want to change it back to `row` and use `justify-content-center` class,especially as you don't seem to need masonry as your cards are equal heights — Pete, Jan 11 '21 at 14:07

score 1 · Accepted Answer · answered Jan 11 '21 at 13:52

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>

score 1 · Answer 2 · answered Jan 11 '21 at 14:13

Bootstrap card-columns uses CSS multi columns and for various reason it's not really possible to center items, or align rows differently.

Instead of using card-columns, use the grid (row > col-*), but you should note this won't give you a masonry layout or top-to-bottom ordering.

How to center last two cards in bootstrap?

2 Answers2