Bootstrap 4 responsive card group with uniform height card footers

I've set up a responsive card layout using Bootstrap 4's card-deck class utility. Everything is functioning as expected, but I'm looking to align the top of the footers instead of having them default to bottom aligning and potentially overflowing. I'm not sure how to achieve equal height footers per row using flexbox. I'd prefer not to rely on JavaScript for this, as I've successfully built the entire page using flexbox alone.

Here's the JsFiddle link for reference: http://jsfiddle.net/nus1v4ak/4/

<div class="container">
  <ul class="card-deck">
    <li class="col-xs-4 card col-sm-4 col-lg-3">
      <div class="card-body">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>
      </div>
      <div class="card-footer">
        <p>paragraph 1</p>
      </div>
    </li>

    <!-- additional <li> elements with various content sizes go here -->

  </ul>
</div>

Current display: https://i.sstatic.net/xOPsF.png

Desired display: https://i.sstatic.net/VDcoi.png

htmlcssbootstrap-4

Answer №1

.card:nth-child(1) .card-footer,
.card:nth-child(2) .card-footer,
.card:nth-child(3) .card-footer {
  height: 100px;
}

Here is a suggestion for enhancing your CSS in the fiddle you provided. By using the :nth-child() selector with the .card class, you can achieve the desired effects. Feel free to test it out and let me know if you need any further clarification!

Uniform Footer Height-

.card-footer {
  height: 100px;
}

This will ensure that each footer has a consistent height of 100px regardless of its content.

Responsive Height Based on Device Width-

.card-footer {
  height: 5vw;
}

By setting the height to be relative to the viewport width (vw), the footer height will adjust responsively based on the device's screen width, providing a flexible height that adapts to different screen sizes.

Answer №2

Take a look at this coding example

.container:nth-child(1) .box-footer,
.container:nth-child(2) .box-footer,
.container:nth-child(3) .box-footer {
  height: 150px;
}

Please adjust the height according to your preference

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

Is there a way to get this script running on WordPress?

I'm working with this JavaScript code: $(document).ready(function(){ $("text1").click(function(){ $(this).hide(); }); }); Here's the HTML code: <div class="div1"> <p class="text1">text to appear when the user p ...

phpjqueryhtmlwordpress

Heroku - JavaScript and CSS Updates Causing Loading Issues

Ruby version: 2.1.5 | Rails version: 4.1.1 For some reason, the changes I make to my JavaScript and CSS files are not reflecting on Heroku; it seems like the cached assets are still being used. I've tried removing the assets and precompiling them bef ...

javascriptcssruby-on-railsherokuruby-on-rails-4.1

Tips for adjusting arrow alignment in your custom breadcrumbs using Bootstrap 5.2.0

There is an issue with my custom Bootstrap 5.2.0 breadcrumb - the right arrow appears before the end of the breadcrumb's item box when I add one or more items. To demonstrate the problem, I have created a fiddle where you can see the error: .breadcru ...

cssbootstrap-5breadcrumbs

Stop rows from causing the table to stretch in width

We have a unique table structure where the first row contains two cells and the second row contains only one cell. The width of each cell is determined by its content. Our goal is to prevent the cell in the second row from expanding the overall table widt ...

htmlcsshtml-tablewidthcell

Integrating a Find Pano functionality into a Kolor Panotour

I used a program called Kolor to create a panorama. Now, I am attempting to integrate the "find pano" feature, which involves searching through the panoramic images for display purposes. I have come across an HTML file that contains the search functionalit ...

javascripthtmlcsssearchpanoramas

substitute bullet point list item with new element

Assuming I have a list: <ul class="ul-1"> <li class="li-1">xx -1</li> <li class="li-2">xx -2</li> <li class="li-3">xx -3</li> </ul> Then I store it as: var list = $('.ul-1').html(); In ...

javascripthtmljquery

Comparing jQuery's min-width and width properties: A guide on eliminating pixels

Exploring some basic jQuery and JavaScript here. When I use the .width() method, I get an integer value. However, when I use .css('min-width'), it returns a value in pixels which makes it challenging to perform calculations. What would be the be ...

javascriptjquerywidthcss

I'm having trouble obtaining accurate results for $....<...$ within the <li> tags using MathJax

I have gained extensive experience working with LaTeX formatting, but not every document follows the standard practice of having a space before and after the symbols < and >. When I attempt to use MathJax to display these documents, they fail to rend ...

htmlmathjax

Unable to input text in Vue.js text field

Recently, I encountered an issue while working on a new form using Laravel/Vue to input an address. Strangely, I found myself unable to type anything in the text input fields. Despite trying various solutions and seeking help from Google, the problem persi ...

htmlcssvue.js

Unable to present the information due to a codeigniter error in retrieving the data

Encountering an issue where the data cannot be displayed and it's showing an error message of undefined variable: avg. Below is the script being used: The controller function: public function rate_config() { $rt = $_POST['hasil_rating&a ...

phphtmlmysqlcodeignitercodeigniter-3

"Implementing a seamless transition effect on two slideshows using jQuery's fadeslideshow

I currently have a homepage featuring a fadeslideshow with 5 slides. The fadeslideshow plugin being used can be found at http://plugins.jquery.com/project/fadeslideshow. On the homepage, there is also a menu bar with various menu items. When a user clicks ...

javascriptjqueryhtmlcss

Am I on the right track with my code?

Is the code I've written sufficient to position text above an image? It resembles the orange "Ask Question" button on StackOverflow, but without being a clickable button or link. The text is surrounded by an orange color and it works fine, but I' ...

cssimagehtmltext

Adjusting the navigation bar to remain at the top while scrolling

We are currently working on a solution to pin the navbar to the top of the viewport when scrolling, while ensuring it does not overlap with the footer. We have attempted to use the affix Bootstrap plugin to achieve this, but so far, we have not seen any re ...

twitter-bootstrapbootstrap-4navbaraffix

Using CSS box-shadow to elevate an image

I am looking to create a background wrapper using CSS instead of an image. My goal is to add box shadow to achieve the same look as shown in the attached image. I understand that I will need to use the box-shadow property for this task. However, I am uns ...

htmlcss

Conceal a column within a nested ListView

I am facing a challenge with nesting ListViews where I need to hide a specific table column in the inner ListView based on a certain parameter value in the URL. Specifically, I want to hide the ID column (both header and data) when the URL contains "...? ...

asp.nethtmllistview

The new data is not being fetched before *ngFor is updating

In the process of developing a "Meeting List" feature that allows users to create new meetings and join existing ones. My technology stack includes: FrontEnd: Angular API: Firebase Cloud Functions DB: Firebase realtime DB To display the list of meeting ...

javascripthtmlangulartypescriptasynchronous

What techniques can be used to resize an image to perfectly fit a square on a webpage?

A challenge on the web page is to display images in a square format of 90 * 90 pixels. However, the sizes of these images are not consistent and may vary from 80*100 to 100*80 or even 90 * 110. The requested solution is to stretch the image as follows: ...

javascripthtmlcss

Creating a stylish border for a div element

Having trouble with styling a border around a div box. I'm struggling to find a way to prevent the borders from looking like this: Let me show you an example of what I'm dealing with: .num.num_1 { border-left-color: #0D2431; } .num { wid ...

htmlcss

Iterating through elements to set the width of a container

I am currently working on a function that dynamically adjusts the width of an element using JavaScript. Here is my JavaScript code: <script> $('.progress-fill span').each(function(){ var percent = $(this).html(); if(per ...

javascriptjqueryhtmlcss

Error alert: Blinking display, do not dismiss

I am trying to make it so that when the "enviar" button is clicked, the "resultado" goes from being hidden ("display:none") to being visible ("display:block"). This is my html document: <script type="text/javascript"> function showResu ...

javascripthtmlcssblock