Bootstrap4 card-deck - how to have card-deck fits content

Question

I try to use card-deck with cards inside this way :

card-deck is centered in a column
card-deck fits content width (actually, it's always 100% width, width: auto doesn't change anything)
cards inside the card-deck are left-align

I build a simple codepen for testing, try lot of things but never have the good behaviour... See https://codepen.io/studio-matavai/pen/zYBeQOX

<div class="row">
      <div class="col-12">
         <div class="card-deck">
            <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
         </div>
      </div>
    </div>

Doesn't anyone know how to do this ?

Regards.

----- EDIT -----

With a picture :)

Hi, I want the card-deck to fit the content (the cards), not to be full width. — Matavai, Nov 15 '20 at 13:48

Red Wing Justice Chan · Answer 1 · 2020-11-17T12:59:41.397

0

Here it is.

.wrapper {
    margin-left: auto;/*this makes wrapper center*/
    margin-right: auto;/*this makes wrapper center*/
    border:1px solid blue;
    width:100%;
    text-align:center;
    }

.card {
padding-left: 10px;
    padding-right: 10px;
    max-width: 240px;
    margin-left: 0px;
    margin-right: 0px;
    border: 0px;
    display: inline-block;
    min-width: 240px;
}

.card-body{
  border:1px solid black;
}

<html>
  <head>
  </head>
  <body>
    <div class="row">
      <div class="col-12">
         <div class="wrapper">
            <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           <div class="card">
                <div class="card-body">
                  poipoipio
                </div>
            </div>
           
         </div>
      </div>
    </div>
  </body>
</html>

edited Nov 17 '20 at 12:59

answered Nov 15 '20 at 13:33

Red Wing Justice Chan

161
1
1
8

The card-deck still be 100% full width, it doesn't fit the content – Matavai Nov 15 '20 at 13:52
What do you mean by fitting the content? Could you draw this so that I can know what is the expected result? – Red Wing Justice Chan Nov 15 '20 at 13:55
I add a picture to my question – Matavai Nov 15 '20 at 14:05
Updated snip. Also you can set the wrapper as px eg: 900px – Red Wing Justice Chan Nov 15 '20 at 14:30
Hi, thks for the reply but I need all cards to have a 240px width. – Matavai Nov 15 '20 at 14:41
So set wrapper as max-width:780px and min-width:780px – Red Wing Justice Chan Nov 15 '20 at 14:52
(240+20)*3 = 780 (240 = each card actualwidth, 20 is padding-left plus padding-right) 3 is the number of card – Red Wing Justice Chan Nov 15 '20 at 14:53
Of course, but is there a solution for having the card-deck fits the content ? In responsive mode (if 5 card per row, card-deck = 5 cards width, if 4 cards per row, card-deck = 4 cards width....). Actually, it always be 100% width (if I have 4 cards and the viewport is 4.5 cards width, the card-deck is 4.5 cards width, no 4 cards width) – Matavai Nov 17 '20 at 10:51
I am not sure what is the meaning of fit the content, but I have update the snipppet. Is this your expected result? – Red Wing Justice Chan Nov 17 '20 at 13:01
Hi, this is what I need, but I try to have the last card not centered but aligned to the left and keep the responsive (so I can't add a special css to the last card because I don't know it in advance if there's 1, 2 3 or 4 cards on the last line). – Matavai Nov 18 '20 at 14:28

Bootstrap4 card-deck - how to have card-deck fits content

1 Answers1