Arrange the footers in the bootstrap card deck to be perfectly aligned at the top

Using bootstrap 4 to showcase cards has been successful, but there is an issue with footers that have varying content lengths. Instead of the footer adjusting its position based on the content, is there a way to keep the tops aligned while pushing the content down?

See a demo here: http://jsfiddle.net/6uv9a30n/1/

<div class="container">
  <div class="card-deck">
    <div class="card mb-4">
      <div class="card-body">
        <h4 class="card-title">1 Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
 </div>
</div>

Current Output: https://i.sstatic.net/ZQkKd.png

Desired Output: https://i.sstatic.net/PYdiz.png

htmlcssbootstrap-4flexboxbootstrap-cards

Answer №1

It may sound a bit simplistic, but one trick is to use the small HTML tag with the css property set to transparent color. This will ensure that it always stays on top regardless of how much text is added.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1P" crossorigin="anonymous">



<div class="container">
  <div class="card-deck">
    <div class="card mb-4">
      <div class="card-body">
        <h4 class="card-title">1 Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
        <small style="color: transparent;">Text not going to show</small>
      </div>
    </div>
    <div class="card mb-4">
      <div class="card-body">
        <h4 class="card-title">1 Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago Last updated 3 mins ago</small>

      </div>
    </div>
    <div class="card mb-4">
      <div class="card-body">
        <h4 class="card-title">1 Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
        <small style="color: transparent;">Text not going to show</small>
      </div>
    </div>
  </div>
</div>

Answer №2

If you want to achieve this layout, use the flex CSS property on both the card-body and card-footer.

body {
  margin: 10px;
}

/* Customize Bootstrap card */
.card-deck .card-body { 
  flex: 0 0 auto;
}

/* fix footer height */
.card-footer { 
  flex: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >

<div class="container">
  <div class="card-deck">
    <div class="card mb-4">
      <div class="card-body">
        <h4 class="card-title">1 Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer equal">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
    <div class="card mb-4">
      <div class="card-body">
        <h4 class="card-title">1 Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago Last updated 3 mins ago</small>
      </div>
    </div>
    <div class="card mb-4">
      <div class="card-body">
        <h4 class="card-title">1 Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

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

Images with fadeIn-Out effect on a slide restrict the movement of the div

I am currently working on a project where I have a div named "background" containing 4 images (400x300px) that fade in and out in a row every x seconds. The issue I am facing is that these images are displaying on the top-left of the browser, and I am tr ...

javascriptjquerycss

What is the best way to ensure a stable background image using CSS?

I have successfully created my navigation section and now I am working on the main body of the website. However, when I try to add a background image, it ends up appearing on the navbar as well. Can someone please assist me with this issue? Below is the HT ...

htmlcss

Need to delete the product page link on WooCommerce?

I am currently working on fixing the one-page checkout process and I need to remove a single product link from a product picture. The goal is to have only the checkout link displayed on this page, specifically within a quickview view. After trying out var ...

phpcsswordpressfunctionwoocommerce

Run a JavaScript code to show a hidden element

My latest project involves automating tasks on a website using Selenium. I encountered an issue where I cannot click on a hidden button defined this way: <body> <div class="smenu" id="smenu4"> <input tabIndex="-1" type="button" ...

c#htmlselenium

store user settings in local storage

After writing some code with a link that toggles text visibility upon click, I now want to incorporate saving this state in web storage so that it persists upon page reload. As a beginner in JavaScript and HTML, this task has proven challenging for me. Th ...

javascriptjqueryhtmllocal-storage

What is the best way to place my website's logo in the top-left corner using html and css?

Hello everyone. I am currently working on customizing a website using an HTML and CSS template for a project, but I need to make some modifications. My main goal is to add the company logo to the header, specifically in the top-left corner, however, I&apo ...

htmlcss

Utilizing HTML templates efficiently without the need for a view engine

For a new application, we are implementing multiple servers for handling different functions - one server for delivering HTML files, another as a proxy to handle HTTPS requests, and a Java backend with a database. The view server should be simple, with an ...

javascriptjqueryhtmltiles

Tips for effectively personalizing the dropdown menu made with ul-li elements

https://i.sstatic.net/7kkqL.png https://i.sstatic.net/dCwkI.png After creating a drop-down menu using ul and li tags, I realized that when the menu is opened, it shifts the blocks below on the screen. To prevent this from happening, I adjusted my CSS as ...

htmlcssfrontendscss-mixins

Determining the pageY value of a div element with overflow-y styling

Currently, I have implemented a script that tracks the mouse's position upon hover. My goal is to integrate this script within a div that has overflow-y: scroll The script currently utilizes pageY which identifies the position relative to the windo ...

javascriptjquerycss

Having trouble with the dropdown multiselect feature in AngularJS?

I'm striving to develop a straightforward multi-select dropdown utilizing angular JS, bootstrap, and JS. This dropdown should display days (mon, tue...sun), with options for select all and unselect all. My goal is to create a controller that will de- ...

javascripthtmlangularjstwitter-bootstrapweb

How to Make Bootstrap 3 Collapse Panels Stand Out with an Active Class

First of all, here is the fiddle link: http://jsfiddle.net/krish7878/h38jn324 I have a simple question. When a panel is clicked and it expands to show its contents, a class 'active' should be added to 'panel-heading'. I came across a ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can you align a div next to another using the float property in CSS?

/*Custom Styling for Divs*/ #box1 { border: 1px solid; border-radius: 25px; width: 900px; } #box2 { border: 1px solid; border-radius: 25px; width: 430px; } #box3 { float: right; border: 1px solid; border-radius: ...

htmlcss

Ways to delete an image from a batch file uploading feature

I encountered an issue with my multiple image upload function that includes preview and remove options. When I select 4 images and preview them correctly, removing 2 from the preview still results in uploading all 4 images to the database. $(document).rea ...

phpjqueryajaxhtml

Is there a way to specifically retrieve the number of likes or followers from Facebook, Twitter, Instagram, and Snapchat in order to display them on my HTML website?

Can you provide guidance on how to obtain the total numbers of likes or followers for our Facebook, Twitter, Instagram, and Snapchat pages without including the plugin boxes or buttons? We are solely interested in the actual numbers. Would this be feasibl ...

javascriptjqueryhtmlfacebookapi

What is the best way to display a poster image in a video element even if the aspect ratio of the poster image does not match the video element?

At this moment, the compatibility of this feature has been tested only in WebKit browsers. When a poster image is applied to a <video> element using the poster attribute, it appears before the user starts playing the video (default behavior). Howeve ...

htmlcsshtml5-video

The Angular overlay is concealed beneath the pinned header

I am seeking a solution to have a mat-spinner displayed on top of my app while it is in the loading state. Currently, I am using an overlay component with Overlay from @angular/cdk/overlay. The issue arises when part of the spinner that should be overlai ...

htmlcssangular

Difficulty encountered when attempting to utilize keyup functionality on input-groups that are added dynamically

I've exhausted all available questions on this topic and attempted every solution, but my keyup function remains unresponsive. $(document).ready(function() { $(document).on('keyup', '.pollOption', function() { var empty = ...

javascriptjqueryhtml

Issues have arisen in IE8 with the background gradient on hover elements in the menu, while it functions properly in all other web browsers

Welcome to the website: I've recently taken on a project involving the gradiated menu on this site. The menu works flawlessly in Firefox, Chrome, and Safari - the hover effect changes the background color to a light gradiated green. However, when it ...

internet-explorercss

Unable to assign default value to input field of type "time" in Chrome browser

I'm intrigued by Chrome's feature that automatically applies masking/formatting when using the type="time" attribute/value. However, I'm having trouble setting an initial value for the control. For example: <input type="ti ...

htmlgoogle-chromehtml-input

Calculate the total sum by iterating through a loop and adding the values of input fields with a type of "number"

I have a Shopping Cart set up in a loop that retrieves Products and Prices from the Database. Each row contains an input field of type "number" labeled as Quantity. My goal is to multiply the price by the quantity for each row when I click on a submit butt ...

phphtmlmysqlloopssum