Card header cannot strech to the card edge when using Bootstrap cards grid

Question

I use bootstrap 4 in Laravel and write blade.php template files. Below is my code.

The card grid looks good, but there are blank spaces between card titles and the car edges.

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

score 2 · Accepted Answer · answered Feb 18 '20 at 04:34

the left and right padding is added due to class col-sm-3 ... just override these to get what you want...

code snippet below:

.card.unassigned.border-secondary.col-sm-3 {
  padding-right: 0;
  padding-left: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class='container'>
  <div id="unassigned-list" class="row">
    <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>
    <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>
    <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>
    <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>

  </div>
</div>

Card header cannot strech to the card edge when using Bootstrap cards grid

1 Answers1