Bootstrap 4 card-columns width

Question

I am using code from the docs to create a card-columns layout that will have 3-4 cards. I am starting with just one. 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 natural lead-in to additional content. This content is a little bit 
 longer.</p>
  </div>
</div> 

Fiddle

What I want is to have my column taking the whole width provided. Just like in my example when I am resizing it to the right at some point it takes the whole space. Is that possible?

Thanks

Answer 1

It's basically the same issue as explained here. In Bootstrap each breakpoint defines a different number of columns across. That's why it goes to 1 column on small screens in the fiddle. So, if you want to change it to always be 1 column across you can use CSS, but this will effect the entire group of card columns, not just a single card.

    .card-columns {
        column-count: 1;
    }

https://codeply.com/go/PKwviFqstk

Also see: Is there a way to specify different widths for columns in CSS3?