CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4twitter-bootstrap-4
GoOutside
GoOutside

Reputation: 103

Bootstrap 4 - Center Just Two Cards (Not Three, Just Two)

I am trying to use the card-columns class in Bootstrap 4 to create dynamic pages that might, at times, have from two to as many as 8 different cards in them.

For now, my problem is simple: I am trying to use something like a justify-content-around class to my cards, so that, if there are only two cards, they center themselves on the page next to each other. Right now they stay on the left and they will not move from the left.

I'm just looking for two cards, side by side, on the page.

<div class="container">
<div class="card-columns">
  <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a longer card with shorter text.</p>
    </div>
  </div>
</div>
</div>

Help is very much appreciated.

Upvotes: 4

Views: 10355

Answers (2)

Cat
Cat

Reputation: 96

I got the behavior you described when I added d-flex justify-content-center to your card-columns:

<div class="container">
  <div class="card-columns d-flex justify-content-center">
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with shorter text.</p>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/3y8ks4em/1/

Upvotes: 8

awzx
awzx

Reputation: 1033

You can simply put your two cards in a row inside a container and using grid properties (6-6) :

https://v4-alpha.getbootstrap.com/layout/grid/#equal-width

<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="card">
        <div class="card-block">
         <h4 class="card-title">Card title</h4>
         <p class="card-text">This is a longer card with shorter text.
         </p>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="card">
        <div class="card-block">
         <h4 class="card-title">Card title</h4>
         <p class="card-text">This is a longer card with shorter text.
         </p>
        </div>
      </div>
    </div>
  </div>

</div>

Then you can chose a width for your container and centering it.

Upvotes: 0

Related Questions