Bootstrap: Cards in .card-deck do not always have same width

Created on 31 Mar 2016 · 8Comments · Source: twbs/bootstrap

This is with respect to bootstrap v4.
Here is a link to reproduce the issue:
http://paradite.github.io/d3card/

By clicking the buttons to change to font size of the card-title, the cards will either have equal width or unequal width. I believe the correct behaviour should be that cards always have equal width.

A possible reason may be due to the image size, but then again the whole point of the card deck is to dynamically fit the image into the cards and fit the cards into the screen I believe.

OS: OS X 10.11.3
Browser: Chrome 49.0.2623.87

confirmed css v4

Source

paradite

Most helpful comment

Work for me:

.card-deck {
    width: 100%;
}

But why it work????

eresik on 11 Apr 2016

👍3

All 8 comments

Confirmed.
CC: @mdo

cvrebert on 1 Apr 2016

I think I found the cause of the issue, it is the width: 1% inside .card-deck .card

I was able to fix the issue by using

.card-deck .card {
    width: initial;
}

paradite on 2 Apr 2016

Work for me:

.card-deck {
    width: 100%;
}

But why it work????

eresik on 11 Apr 2016

👍3

My guess as to why this works is because <table> cells (by default) resize depending on the content that is inside (if a width is not defined).

However with a "reset" style like width: 100%, it forces all of them to be the same width.

Similar to in flexbox if you did flex: 1 to children elements of a parent with display: flex.

ItsJonQ on 25 Apr 2016

I have a problem with the card-deck, he is breaking the width of the size of the body / html, creating horizontal scrolling, following image and test html

<!DOCTYPE html> <html lang="pt-br"> <head> <title>test nivo</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"> </head> <body> <div class="card-deck-wrapper"> <div class="card-deck"> <div class="card"> <div class="card-block"> Card 1 </div> </div> <div class="card"> <div class="card-block"> Card 2 </div> </div> <div class="card"> <div class="card-block"> Card 3 </div> </div> <div class="card"> <div class="card-block"> Card 4 </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script> </body> </html>

card-deck-size-problem

rubenscd on 11 May 2016

@rubenscd That should have been opened as a separate issue, but I see the problem: all the content in the <body> should be wrapped in a <div> with .container or .container-fluid.