Bootstrap 4: Cards: How do I make horizontal repeating cards in three columns

Question

I am trying to make something like this:

card1 card2 card3 card4 card5 card6 card7 card8 card9 card10 card11 card12 card13 card14 card15 etc....(asp.net repeater control)

MEANING: Horizontal cards for Three columns.... So instead of vertically....I was the cards to go Horizontally FOR three columns (like a newspaper).

Solution 1

Use a single "row" div and put any number of "col-sm-4" divs inside. It will automatically break after 3 columns.

<div class="row">
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
</div>

Solution 2

You can use .col-sm-4 class, that will align 3 divs containing card block per row

<div class="row">
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
</div>

Comments

[Oleksandr Oleksiv]

add .d-inline class to card div

[user2860427]

Doesn't seem to work. Does anyone have an example?

[Oleksandr Oleksiv]

If you want 3 columns you can simply add .col-sm-4 class to card. It will align 3 card x row

[user2860427]

I don't know... I have three columns and it is repeating but within the first column. I am using this... <div class="card-columns"> <div class="container-fluid"> <div class="d-flex flex-row flex-nowrap"> <div class="card card-block col-md-4">

[Erty Seidohl]

While this answer is probably correct and useful, it is preferred if you include some explanation along with it to explain how it helps to solve the problem. This becomes especially useful in the future, if there is a change (possibly unrelated) that causes it to stop working and users need to understand how it once worked.

[user2860427]

It's not working. Yes it makes it horizontal but it does this 1 under that is 2 under that is 3 then next to that is 4. I want it 1,2,3 then next line, 4,5,6.

[user2860427]

That worked. Thanks. The <div class="col-sm-4"> isn't "sucking to the text" and has a lot of padding almost like it's trying to match the next cell but I can ask that question in another question. thanks.