2

I want to have a few Bootstrap cards on html page. The exact number of them I don't know and cannot predict, because it depends on the user data in the database. For example, if the user has 4 items I need to create 4 cards, if 10 then 10 cards and so on. So, I create those cards dynamically with jQuery by giving them Bootstrap 4 class names. The issue is Bootstrap cards start filling in the space from left by giving equal width and height to the cards.

So, if the user has 2 items, I want to create 2 cards, with same width and height of my choice and whatever is left on that row to be blank/empty

I tried changing default card width, trying max-width, min-width. But it did not work

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  </div>
</div>

This is the default Bootstrap 4 result:

[ [ card 1 ] [ card 2 ] ]

What I want is:

[ [card 1] [card 2] [leave blank all the way to the right ] ]

Any suggestions? Thanks

d219
  • 2,707
  • 5
  • 31
  • 36
Suren
  • 173
  • 3
  • 11

1 Answers1

0

By default, the cards are 100% of the width of the container. You can limit the width of the cards using CSS:

.card-deck .card {
    max-width: 300px;
}

Update: Added a runnable example.

.card-deck .card {
    max-width: 200px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
 </div>
Loïc Bellemare-Alford
  • 538
  • 5
  • 12
  • yes, I tried this, but the two cards still split the container/the screen into two equal parts creating large margins from left and right. Should I also remove the margins manually so that they start from the left and move on to the right? Would it be a good practice? – Suren Aug 12 '19 at 20:42
  • It works for me, see the example above. I notice you have a duplicate div at the bottom of your code example, that could be causing problems. – Loïc Bellemare-Alford Aug 12 '19 at 21:12
  • It's hard to say what is your exact problem without seeing the complete code. From what you describe, something seems to be affecting Bootstrap default behavior. – Loïc Bellemare-Alford Aug 12 '19 at 21:14
  • please, see this link: https://i.imgur.com/asXV0BT.png . I just copied and pasted your above code, see the result on my screen – Suren Aug 13 '19 at 00:35
  • This is weird! Does the `card-deck` have some custom styling? It seems like it has `justify-content: space-evenly;`. Could you try setting `justify-content: flex-start !important;` on `.card-deck`? – Loïc Bellemare-Alford Aug 13 '19 at 23:31