bootstrap 5 alpha 2 card deck example not showing like it is in documentation

Question

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>

score 16 · Accepted Answer · answered Jan 08 '21 at 23:25

16

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

answered Jan 08 '21 at 23:25

Edikan Bassey

197
2
9

score 5 · Answer 2 · edited Apr 26 '21 at 10:23

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>

Tim Vermaelen · Answer 3 · 2021-06-28T09:44:30.353

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.

score 2 · Answer 4 · answered Feb 10 '22 at 06:11

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>

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](/help/how-to-answer). — Community, Feb 10 '22 at 09:11

bootstrap 5 alpha 2 card deck example not showing like it is in documentation

4 Answers4

Linked