Cards not appearing in Bootstrap 5

Question

I've been trying to connect my bootstrap card deck to a mongo database using ejs. No errors, but the cards aren't appearing when I render the website. Does anyone know what might be wrong?

Here's the code:

<div class="container">
<div class="row row-cols-4">
<% researchCards.forEach(function(researchCard){ %>
      <div class="card col">
        <div class="card-body">
          <h5 class="card-title"><%= researchCard.title %></h5>
          <h6 class="card-title"><%= researchCard.credit %></h6>
          <p class="card-text"><%= researchCard.content %></p>
          <a href="<%= researchCard.link %>">Read more</a>
        </div>
    </div>
</div>
<% }); %>

The mongodb model is called "ResearchCards", I have added two to the database, but they don't turn up on the page and I can't work out why. I'm not a very experienced programmer, so any advice (in simple terms) would be very appreciated!

The card should be *inside* the col, not the same div – Carol Skelly Apr 06 '21 at 16:58 — Carol Skelly, Apr 06 '21 at 16:58
Didn't make a difference I'm afraid, tried both ways – Rowan Apr 13 '21 at 10:26 — Rowan, Apr 13 '21 at 10:26

score 0 · Answer 1 · answered Apr 06 '21 at 16:20

Try below code:

<div class="container">
  <div class="row row-cols-4">
    <% researchCards.forEach(function(researchCard){ %>
      <div class="card col">
        <div class="card-body">
          <h5 class="card-title"><%= researchCard.title %></h5>
          <h6 class="card-title"><%= researchCard.credit %></h6>
          <p class="card-text"><%= researchCard.content %></p>
          <a href="<%= researchCard.link %>">Read more</a>
        </div>
      </div>
    <% }); %>
  </div>
</div>

Sorry, still not working. Thanks for the suggestion. – Rowan Apr 13 '21 at 10:27 — Rowan, Apr 13 '21 at 10:27

Cards not appearing in Bootstrap 5

1 Answers1