Bootstrap 4 card columns - X number of cards per column

Question

I have 60 cards I want to show on a page. I would like to have 3 columns with 20 cards per column.

How can I achieve this?

My code is something like.

<div class='container'>
  <div class='card-column'>
    <div class='card>
      Card content 1
    </div>
    <div class='card>
      Card content 2
    </div>
    <div class='card>
      Card content 3
    </div>

  </div>
</div>

Answer 1

Use a row with three columns and 20 cards in each column:

.card {
  margin: 1rem 0;
  padding: 1rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
      <div class="card">Card 4</div>
      <div class="card">Card 5</div>
      <div class="card">Card 6</div>
      <div class="card">Card 7</div>
      <div class="card">Card 8</div>
      <div class="card">Card 9</div>
      <div class="card">Card 10</div>
      <div class="card">Card 11</div>
      <div class="card">Card 12</div>
      <div class="card">Card 13</div>
      <div class="card">Card 14</div>
      <div class="card">Card 15</div>
      <div class="card">Card 16</div>
      <div class="card">Card 17</div>
      <div class="card">Card 18</div>
      <div class="card">Card 19</div>
      <div class="card">Card 20</div>
    </div>
    <div class="col-sm-4">
      <div class="card">Card 21</div>
      <div class="card">Card 22</div>
      <div class="card">Card 23</div>
      <div class="card">Card 24</div>
      <div class="card">Card 25</div>
      <div class="card">Card 26</div>
      <div class="card">Card 27</div>
      <div class="card">Card 28</div>
      <div class="card">Card 29</div>
      <div class="card">Card 30</div>
      <div class="card">Card 31</div>
      <div class="card">Card 32</div>
      <div class="card">Card 33</div>
      <div class="card">Card 34</div>
      <div class="card">Card 35</div>
      <div class="card">Card 36</div>
      <div class="card">Card 37</div>
      <div class="card">Card 38</div>
      <div class="card">Card 39</div>
      <div class="card">Card 40</div>
    </div>
    <div class="col-sm-4">
      <div class="card">Card 41</div>
      <div class="card">Card 42</div>
      <div class="card">Card 43</div>
      <div class="card">Card 44</div>
      <div class="card">Card 45</div>
      <div class="card">Card 46</div>
      <div class="card">Card 47</div>
      <div class="card">Card 48</div>
      <div class="card">Card 49</div>
      <div class="card">Card 50</div>
      <div class="card">Card 51</div>
      <div class="card">Card 52</div>
      <div class="card">Card 53</div>
      <div class="card">Card 54</div>
      <div class="card">Card 55</div>
      <div class="card">Card 56</div>
      <div class="card">Card 57</div>
      <div class="card">Card 58</div>
      <div class="card">Card 59</div>
      <div class="card">Card 60</div>
    </div>
  </div>
</div>