CODEWITHSUNDEEP
cssbootstrap-4bootstrap-cards
profiler
profiler

Reputation: 627

How to set number of cards per row in card-deck in Bootstrap 4

I am looking for solution fot setting number of cards in card-deck per row in bootstrap.

For example, I would like to have two cards per row:

<div class="card-deck">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
</div>

Upvotes: 3

Views: 3806

Answers (3)

Arpita Patel
Arpita Patel

Reputation: 360

I hope you want like this: and you want more gap between cards you change the class .md-3 to .md-4

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />

<div class="row">
  <div class="col-sm-6">
  <div class="card my-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
    </div>
  </div>
   <div class="col-sm-6">
  <div class="card my-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
    </div>
  </div> <div class="col-sm-6">
  <div class="card my-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
    </div>
  </div> <div class="col-sm-6">
  <div class="card my-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
    </div>
  </div>
</div>

Upvotes: 0

Xenio Gracias
Xenio Gracias

Reputation: 2758

is this what you wanted??

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />

<div class="row">
  <div class="card col-sm-6">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-6">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-6">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-6">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
</div>

Upvotes: 5

DESHRAJ
DESHRAJ

Reputation: 114

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
 
<div class="card-deck row">
  <div class="card col-sm-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
    Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
          Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
          Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
          Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions