Utilizing bootstrap 4 within Laravel, I create blade.php template files. Here is a snippet of my code.
The card grid layout appears satisfactory, however, there seems to be some empty space between the card titles and the edges of the cards.
<div id="unassigned-list" class="row">
@foreach ($cardsUnAssignedToCurrentUser as $card)
<div class="card unassigned border-secondary mt-2 mr-2 col-sm-3">
<div class="card-header">
Card<a href="#" class="card-link pull-right moveBtn">Assign</a>
</div>
<div class="card-body unassigned">
<h6 class="card-subtitle mb-2 text-muted">First Name</h6>
<p class="card-text">@if (strlen($card->first_name) > 0) {{ $card->first_name }} @else None @endif
</p>
<h6 class="card-subtitle mb-2 text-muted">Last Name</h6>
<p class="card-text">@if (strlen($card->last_name) > 0) {{ $card->last_name }} @else None @endif</p>
<h6 class="card-subtitle mb-2 text-muted">Last Four Number</h6>
<p class="card-text"><strong>{{ $card->last_four_digits }}</strong></p>
<input type="hidden" value="{{ $card->id }}" />
</div>
</div>
@endforeach
</div>