CODEWITHSUNDEEP
bootstrap-4
John Denver
John Denver

Reputation: 362

Stop Bootstrap cards from stacking in sm and xs widths

As soon as the page switches to a width below the md size, the cards start stacking. How can I prevent the cards from stacking and keep them looking the same as the md with during sm and xs?

This is the code that corresponds to the pictures.

<div class="card-group">
<div class="card">
  <img class="card-img-top" src="/img/faces/house/img" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Paul Dilks</h5>
    <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="/img/faces/house/img" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Donald Norcross</h5>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
</div>

md width

sm width

Upvotes: 0

Views: 360

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362290

Use to flex-row flex-nowrap on the card-group to prevent wrapping/stacking...

<div class="card-group flex-row flex-nowrap">
    <div class="card">
        <img class="card-img-top" src="//placehold.it/500x300" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Paul Dilks</h5>
            <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="//placehold.it/500x300/000/fff" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Donald Norcross</h5>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
</div>

https://www.codeply.com/go/689jWCqNir

Upvotes: 1

Related Questions