Search code examples
csstwitter-bootstrapbootstrap-4flexboxbootstrap-cards

Bootstrap 4 card, extend last card-footer to fill space

I am trying to extend the last card-footer to fill the rest of the space if it doesn't have any buttons. I am tried a number of flex combinations without much luck.

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

<div class="row">
  <div class="col-4 mb-4">
    <div class="card">
      <div class="card-header text-center">
        <span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
      </div>
      <div class="card-body">
        <div class="d-flex">
          <div class="text-truncate mr-auto">
            <span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
          </div>
          <div>
            <span class="final-score">4</span>
          </div>
        </div>
        <div class="d-flex">
          <div class="text-truncate mr-auto">
            <span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
          </div>
          <div>
            <span class="final-score">5</span>

          </div>
        </div>
      </div>
      <div class="card-footer d-flex">
        <div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
        <div class="">Final</div>
      </div>
      <div class="card-footer text-center">
<a target="_blank" title="" href="http://maps.apple.com/maps?daddr=34.8043103,-82.5869584" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i> Venue</a>
      </div>
    </div>

  </div>
<div class="col-4">
    <div class="card">
      <div class="card-header text-center">
        <span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
      </div>
      <div class="card-body">
        <div class="d-flex">
          <div class="text-truncate mr-auto">
            <span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
          </div>
          <div>
            <span class="final-score">4</span>
          </div>
        </div>
        <div class="d-flex">
          <div class="text-truncate mr-auto">
            <span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
          </div>
          <div>
            <span class="final-score">5</span>

          </div>
        </div>
      </div>
      <div class="card-footer d-flex">
        <div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
        <div class="">Final</div>
      </div>
      <div class="card-footer text-center">
<a target="_blank" title="" href="http://maps.apple.com/maps?daddr=34.8043103,-82.5869584" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i> Venue</a>
      </div>
    </div>

  </div>
  <div class="col-4">
    <div class="card">
      <div class="card-header text-center">
        <span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
      </div>
      <div class="card-body">
        <div class="d-flex">
          <div class="text-truncate mr-auto">
            <span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
          </div>
          <div>
            <span class="final-score">4</span>
          </div>
        </div>
        <div class="d-flex">
          <div class="text-truncate mr-auto">
            <span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
          </div>
          <div>
            <span class="final-score">5</span>

          </div>
        </div>
      </div>
      <div class="card-footer d-flex">
        <div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
        <div class="">Final</div>
      </div>
      <div class="card-footer text-center">
      </div>
    </div>

  </div>
</div>

st

Solution

  • You could try the following (a part of the solution was retrieved from this answer):

    .card {
  height: 100%;
}

.card-body {
  flex: 0 1 auto !important;
}

.card-footer.text-center {
  flex: 1;
}

    I have created a small fiddle showing the result:

    Displays the result