CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
user2860427
user2860427

Reputation: 65

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

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).

Upvotes: 2

Views: 11673

Answers (3)

Kieran
Kieran

Reputation: 18049

You can do this via the flex box properties. Either use your own or the ones provided by bootstrap.

<div class="d-flex flex-row flex-wrap">
    <div class="card card-block col-md-4">
        <div class="card-body">
            <h5 class="card-title">{{prod.title}}</h5>
            <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
            <p class="card-text">{{prod.description}}</p>
        </div>
    </div>
    <!-- Do this as many times as you need -->
</div>

Upvotes: -1

arsis-dev
arsis-dev

Reputation: 453

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>

Upvotes: 2

Oleksandr Oleksiv
Oleksandr Oleksiv

Reputation: 688

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>

Upvotes: 1

Related Questions