0

I am putting together a layout based on card-columns class. What I want is to have two cards with different width in one row. I am using code from the docs that I have modified for the demo purpose. Here is my code:

<div class="card-columns">
 <div class="card">
   <img class="card-img-top img-fluid" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
       <p class="card-text">This is a longer card with supporting text below 
           as a natnt. This content is a little bit longer.</p>
   </div>
</div>
<div class="card"></div>
<div class="card">
   <img class="card-img-top img-fluid" src="..." alt="Card image cap">
   <div class="card-block">
     <h4 class="card-title">Card title</h4>
      <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>

Fiddle

As you can see I have three cards in order to push third one into a second column. Can somebody explain why? Another question is how to have cards with a different width?

Thanks

Mark
  • 4,535
  • 7
  • 39
  • 76
  • 1
    To change the number of columns you can use media queries as explained here: https://stackoverflow.com/a/43117538/171456. However, `card-columns` can't have different widths. – Carol Skelly Jul 27 '17 at 14:01
  • If you want cards side by side, it looks like you want card decks instead of card columns. Or just use plain Bootstrap columns and put a card in each column. – HaveSpacesuit Jul 27 '17 at 14:28

0 Answers0