4

I inserted this example for a card desk and thought it would show like its shown in the docs. But it isn't.
https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css - I am using Bootstrap 5 alpha 2. Has the card layout changed ?
It is showing as three rows instead of 1 row with 3 columns. Do we need to insert grid based HTML too wrapping the card-deck ?

<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 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 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>
</div>

4 Answers 4

16

Use <div class="card-group"> and edit with grid format instead. Card-deck is not supported in Bootstrap 5.

5

To get a nice grid you can use this baseline. You have to use an extra div with a class col to get the nice spacing between columns.

<div class="row row-cols-1 row-cols-md-3 text-center">
      <div class="col">
        <div class="card">
             <div class="card-header">
              your header 1
            </div>
            <div class="card-body">
              your text 1
              <button type="button">Sign Up</button>
            </div>
            <div class="card-footer">
              your footer 1
            </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
            <div class="card-header">
              your header 2
            </div>
            <div class="card-body">
              your text 2
              <button type="button">Sign Up</button>
            </div>
            <div class="card-footer">
              your footer 2
            </div>
        </div>
      </div>
    </div>
  </section>

4

The whole idea behind using .card-deck was to go grid-less. This allows you to implement a "load more cards" functionality without having to re-calculate the grid.

So now in Bootstrap 5 card-decks are not supported anymore and you'll have to use .col again as suggested by previous answers. Since there is no need to calculate .col I guess the decission makes sense.

However, if you're like me and you really want to use a gridless card-deck, here's how to undo the coupling from a .card-group (which is the only gridless card-layout left).

.card-deck {
    @extend .card-group;
    gap: $spacer * 2; // create a gutter

    // de-couple the border
    @include media-breakpoint-up(sm){
        > .card {
            &:not(:first-child) {
                border-top-left-radius: $card-border-radius;
                border-bottom-left-radius: $card-border-radius;
            }

            &:not(:last-child) {
                border-top-right-radius: $card-border-radius;
                border-bottom-right-radius: $card-border-radius;
            }

            + .card {
                border-left: 1px solid $card-border-color;
            }
        }
    }

    // optionally change the breakpoint for column layout on mobile
    @include media-breakpoint-down(md){
        flex-direction: column;
    }
}

All in all I wish they keep the whole border coupling separate, throw in a gutter-variable so we can still use card-deck without having to override a silly media query. This makes me a bit dissapointed for BS5.

2

I was stuck in this for hours before I found out Bootstrap 5 no longer supports card-deck class, Note! This is not updated in the bootstrap documentary, by the way, yet we have practical evidence for that.

THE SOLUTION, use a and grid format to position your cards in a single row as you want.

EXAMPLE CODE:

<div class="row  row-cols-1 row-cols-md-3 mb-3 text-center">
  <div class="col">
    <div class="card">
        <div class="card-header">
              <h3>Card1 header</h3>
        </div>
        <div class="card-body">
          <p>Card1 body</p>
          <button type="button">Card1-Button</button>
        </div>
    </div>
  </div>

 <div class="col">
    <div class="card">
        <div class="card-header">
              <h3>Card2 header</h3>
        </div>
        <div class="card-body">
          <p>Card2 body</p>
          <button type="button">Card2-Button</button>
        </div>
    </div>
  </div
  <div class="col">
    <div class="card">
        <div class="card-header">
              <h3>Card3 header</h3>
        </div>
        <div class="card-body">
          <p>Card3 body</p>
          <button type="button">Card3-Button</button>
        </div>
    </div>
  </diviv>
</div>
1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Feb 10, 2022 at 9:11

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.