CODEWITHSUNDEEP
csstwitter-bootstrap
user6241550
user6241550

Reputation:

Bootstrap 4 - cards get cropped in columns

I'm trying to build a website with the Boostrap 4 alpha 5. The problem is that when I use "card-columns", it starts to look strange. The cards become cut off at the bottom. What am I doing wrong? I actually copied the code directly from the bootstrap website. Or is it a problem of the alpha?

https://i.sstatic.net/GmgU7.jpg

<div class="card-columns">
<div class="card">
    <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>
<div class="card card-block">
    <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer>
            <small class="text-muted">
                Someone famous in <cite title="Source Title">Source Title</cite>
            </small>
        </footer>
    </blockquote>
</div>
<div class="card">
    <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>
<div class="card card-block card-inverse card-primary text-xs-center">
    <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
        <footer>
            <small>
                Someone famous in <cite title="Source Title">Source Title</cite>
            </small>
        </footer>
    </blockquote>
</div>
<div class="card card-block text-xs-center">
    <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 class="card card-block text-xs-right">
    <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer>
            <small class="text-muted">
                Someone famous in <cite title="Source Title">Source Title</cite>
            </small>
        </footer>
    </blockquote>
</div>
<div class="card card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>'

Upvotes: 1

Views: 1548

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362790

There was an issue in alpha 4 that caused the card columns to become cropped, but that has been fixed in alpha 5. Your example seems to work fine in alpha 5: http://www.codeply.com/go/RkafXYSegR

Make sure there is not other CSS beyond Bootstrap that is effecting the card layout.

Upvotes: 1

Related Questions