Increase the size of the card-footer on the final Bootstrap 4 card to completely fill the space

I have been experimenting with different flex combinations to try and stretch the final card-footer to occupy the leftover space if there are no buttons present, but haven't had much success.

<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 extended-space">
        <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>

https://i.sstatic.net/Oo4Oy.png

csstwitter-bootstrapbootstrap-4flexboxbootstrap-cards

Answer №1

Here is a code snippet that might help solve your issue (credit to this answer):

.card {
  height: 100%;
}

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

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

You can view the outcome in this JSFiddle demo:

https://i.sstatic.net/X3h6y.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Whenever I nest my div tags within another div element in an HTML document

Whenever I try to position a div inside another div using float, I encounter problems. <div id="main"> <div id="anotherDiv"> <h1>Test</h1> </div> </div> Here is the corresponding style sheet: #main{ ba ...

htmlcss

Sideways movement of a single line within a table

Would you please help with a challenge I'm facing? I want to create a horizontally scrollable row that spans 100% of the page width without overflowing on top of the background image and while keeping the header text in focus. This is what I have att ...

cssreactjsmaterial-ui

Issue encountered while attempting to include a background image in React JS

I encountered an issue when attempting to include a background image in react js. ./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css) Unable to locate module: An attem ...

javascripthtmlcssnode.jsreactjs

Sophisticated spreadsheet - Pinpointing particular <TR>

With my current setup, I have a complicated table that results in a simple layout. Unfortunately, changing the HTML output is not an option for me right now. So, I am experimenting with jQuery: <div id="contentDiv" class="mainContent"> <table c ...

jquerycss

Tips for organizing a Bootstrap 4 menu overflowing with elements

I'm struggling to figure out how to organize a Bootstrap 4 menu with numerous links. Currently, when I include too many links, the navbar disregards the container and expands its width beyond the container. Here is an image for better clarification: ...

cssnavbarbootstrap-4

Problem with the transform attribute in CSS

Having trouble rotating a div within another div. I tried using the transform property but it's not working as expected. I heard about another method which involves using :before pseudo-element, but I'm not sure what's wrong with that either ...

htmlcss

How come my image is not aligned to the right of the header in my HTML code?

My attempt to align an image to the right side of my heading using code was unsuccessful. Here is the HTML snippet I used: /* Aligning with CSS */ #colorlib-logo img { display: flex; align-items: center; width: 30px; height: 30px; } #colorli ...

htmlcsshorizontal-alignment

Do not apply hover effect to a particular child div when the hover effect is already applied to the parent

I am encountering a problem with the hover effect. I have 3 child div's structured as follows: <div class="parent"> <div class="child1">A</div> <div class="child2">B</div> <div class="child3">C</div ...

htmlcss

What is the best way to create spacing between fields in Material UI?

I just started using material UI and I'm trying to add spacing between my text fields. I've tried adding the spacing but it doesn't seem to be working. Can someone help me figure out how to add space in between textfields? Below is the code ...

javascripthtmlcssreactjsmaterial-ui

Is there a way to preserve the original color format without converting it to RGB

When applying a hsl color in JavaScript, it ends up being converted to RGB instead of staying as an HSL color. document.body.style.backgroundColor = "hsl(0,100%,50%)" document.body.style.backgroundColor; // "rgb(255, 0, 0)" I wanted to set an HSL color a ...

javascriptcsscolorsrgbhsl

How to keep a header and footer fixed on the screen while allowing content to scroll in between with TailwindCSS?

As I work on creating a React PWA for a client using Tailwind CSS, I'm facing the challenge of achieving a specific layout. My goal is to have a fixed header at the top of the screen and a fixed navbar at the bottom, with scrollable content in between ...

reactjsflexboxtailwind-css

Using preventDefault and stopPropagation will prevent altering the CSS properties of a div

I recently made the switch from using onclick on a div to touchstart in order to increase the speed of clicking on a touch screen. However, I have encountered an issue where the CSS property that changes the background color is no longer functioning. Below ...

htmlcssangularjstouchscreen

Using jQuery to create a fixed wrap element

I have a fixed wrap div on my page that I want to reposition after scrolling. My attempt using jQuery resulted in the div being too high and overlapping the footer. img1 img2 Snippet from my code: Below is the revised code snippet: var elementPosit ...

javascriptjqueryhtmlcss

Exploring the Layout Options of Twitter Bootstrap 3

Can someone help me achieve this specific layout design using Bootstrap 3? --------------------------------------------------------- | | | | | ...

csstwitter-bootstrap

Utilizing CSS to apply unique styles to individual radio buttons

I have 4 radio buttons in my quiz application. I need to style only one of them, which is the correct answer option. Here's the HTML snippet that was generated: <p> <input id="SelectedAnswer" type="radio" value="5" name="SelectedAnswer"> ...

htmlcss

Limiting the size of images within a specific section using CSS

When using CSS, I know how to resize images with the code snippets below: img {width:100%; height: auto; } img {max-width: 600px} While this method works effectively, it applies to every image on the page. What I really need is for some images to be ...

javascripthtmlcss

shard: the dropdown menu can be interacted with by clicking, but the options

Having trouble selecting an item from a dropdown menu on a modal using splinter. Despite the dropdown being visible and clickable, the selection is failing unexpectedly. (Pdb) dropdown = next(i for i in my_browser.find_by_xpath('//select[@name="exist ...

pythoncssseleniumselenium-webdriversplinter

Tips for adjusting column sizes in react-mui's DataGrid based on screen size

I would like the title column to occupy 3/4 of the full row width and the amount column to take up 1/4 of the full row width on all screens sizes (md, sx...). Here is the updated code snippet: import React from 'react' const MyComponent = () =&g ...

javascriptcssmaterial-uicomponentssizing

Toggle functionality in Angular to display and conceal elements

I've successfully implemented a show and hide function in Angular for a new project. Currently, when a user hovers over a tile, the corresponding class is added and removed as intended. <article class="col-sm-6" ng-mouseenter="showHiddenTile()" ng ...

javascriptcssangularjs

Search field in DataTables appears to be misaligned

I'm in the process of developing a small website using JSP and DataTables (currently only for the first table). Here's what I have so far: As you can observe, there seems to be an alignment issue with the search field position. I'm n ...

javascriptjqueryhtmlcssdatatables