Trying to loop through database with bootstrap cards - php

Question

Trying to loop through my database and to post a bootstrap card for each "board member" in my database. However, with my current code, they post on top of each other, and I need them in rows. Here is my current code.
<div class="row">
<div class="col-sm-4 my-4">
#if(count($boardMembers) > 0)
#foreach($boardMembers as $boardMember)
<div class="card">
<img class="card-img-top" src="img/user1.jpg" alt="">
<div class="card-body">
<h2 class="card-title">{{$boardMember->name}}</h2>
<p class="card-text">{!!$boardMember->description!!}</p>
</div>
</div>
#endforeach
#else
<p>No Members Found</p>
#endif
</div>
</div>

Answer 1

You need to loop the .col part:
#if(count($boardMembers) > 0)
#foreach($boardMembers as $boardMember)
<div class="col-sm-4 my-4">
<div class="card">
<img class="card-img-top" src="img/user1.jpg" alt="">
<div class="card-body">
<h2 class="card-title">{{$boardMember->name}}</h2>
<p class="card-text">{!!$boardMember->description!!}</p>
</div>
</div>
</div>
#endforeach
#else
<p>No Members Found</p>
#endif
This will create multiple .cols with .cards but make sure you style the <p>No Members Found</p> or you can make it inside a .col too