Ensuring Consistent Height for Bootstrap Card Headers

I am currently working with bootstrap cards on two different web pages. The challenge I am facing is that on one page, the header text has a fixed height so I can easily match their card-header height using min-height. However, on the second page, the cards are dynamically generated, and I do not know the length or words of the text in advance. I want to ensure that all card-headers within a row have the same height.

Is there a way to calculate the min-height based on the tallest card-header in a row?

Although I am already using card-deck, which sets the height for the whole card, my specific issue revolves around the card-header element. I need all card-headers to be uniform in height regardless of the content inside.

https://i.sstatic.net/95cH6.png

Example:

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="card-deck my-3 text-center"> <div class="card mb-4 box-shadow"> <div class="card-header align-items-center d-flex justify-content-center card-header-height"> <h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum Lorem Ipsum Ipsum</h4> </div> <div class="card-image"> <img class="img-fluid" src="img_avatar1.png"> </div> <div class="card-body"> <ul class="list-unstyled mt-3 mb-4"> </ul> </div> </div> <div class="card mb-4 box-shadow"> <div class="card-header align-items-center d-flex justify-content-center card-header-height"> <h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </h4> </div> <div class="card-image"> <img class="img-fluid" src="img_avatar1.png"> </div> <div class="card-body"> <ul class="list-unstyled mt-3 mb-4"> </ul> </div> </div> <div class="card mb-4 box-shadow"> <div class="card-header align-items-center d-flex justify-content-center card-header-height"> <h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum </h4> </div> <div class="card-image"> <img class="img-fluid" src="img_avatar1.png"> </div> <div class="card-body"> <ul class="list-unstyled mt-3 mb-4"> </ul> </div> </div> </div> </div> </body> </html>

Update I encountered a similar issue when adding a list (ul) and list-items (li) into the card-body. It took me some time to realize that the varying lengths of the li text were affecting the overall look of the card-headers. Ensure that your li text has a consistent length to maintain the uniformity of the card-headers.

javascripthtmlcssbootstrap-4

Answer №1

Great job getting close to the solution! Just remember to add the h-100 class to ensure that the height is set to 100% for your card-header along with d-flex

Check out the Live Demo:

<!DOCTYPE html>
<html lang="en>

<head>
  <tittle>Example with Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="card-deck my-3 text-center">
      <div class="card mb-4 box-shadow">
        <div class="card-header d-flex align-items-center justify-content-center h-100">
          <h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum Lorem Ipsum Ipsum</h4>
        </div>
        <div class="card-image">
          <img class="img-fluid" src="https://via.placeholder.com/150">
        </div>
        <div class="card-body">
          <ul class="list-unstyled mt-3 mb-4">
          </ul>
        </div>
      </div>
      <div class="card mb-4 box-shadow">
        <div class="card-header d-flex align-items-center justify-content-center h-100">
          <h4 class="my-0 font-weight-normal">Lorem Ipsum this is a new sentence.</h4>
        </div>
        <div class="card-image">
          <img class="img-fluid" src="https://via.placeholder.com/150">
        </div>
        <div class="card-body">
          <ul class="list-unstyled mt-3 mb-4">
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

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

How can you utilize a computed property in a Vue component to select all the text within it?

When using $event.target.select(), I usually can select all the text. However, in this scenario, it seems to be selecting everything and then replacing the selection with the computed property. How can I select all after the computed property has finished? ...

javascriptvue.js

Utilizing NodeJS code and the SlackAPI to build a custom chatbot named PFBot

Recently, I came up with an idea for a Slack Bot that could censor inappropriate language used by users. For example, if a user types a curse word, the bot would automatically replace it with symbols based on the length of the word. Although I'm rela ...

javascriptnode.jsslack-api

AFrame: keeping an element's world position and rotation intact while reparenting

I am attempting to reassign a child element (entity) to another parent while preserving its position, rotation, and possibly size in the scene. Ideally, I would like to implement a component (let's call it "reparent") that can be added to an entity to ...

javascriptthree.jsaframe

Images within the signature are not appearing as intended

Trying to find a way to display a company logo in an email signature without it being blocked by default on different email clients. Initially, I attempted uploading the image to the company website, but encountered the following error: So, I decided to t ...

htmlimageemailhtml-email

Validating Inputs with an Array of Values in my Angular 2 Application

I have been exploring ways to retrieve data from an array of values instead of a single value when using [(ngModel)] binding in my Angular 2 application. The current setup functions perfectly with a single value, as shown below. The data is pulled from the ...

javascriptangulartypescript

Tips for resolving issues with async-await functions when utilizing Axios

I am trying to implement axios using the async await function in my code. However, I encountered an error when attempting to use async await. useEffect(async() => { await axios .get("https://cryptic-inlet-27003.herokuapp.com/products?size=6" ...

javascriptreactjsasync-await

When I include scroll-snap-type: y; in the body tag, the scroll-snapping feature does not function properly

Hey there! I've been trying to implement scroll-snapping on my project but unfortunately, I couldn't get it to work. I tested it out on both Chrome and Firefox, but no luck so far. Here's the code snippet I've been working with, would a ...

javascripthtmlcssscroll-snapscroll-snap-type

Incorporating a TypeScript module into a JavaScript module within a React application

I'm encountering an issue with my React app that was created using create-react-app. I recently added a Typescript module to the project, which is necessary for functionality reasons. Although it will remain in Typescript, I made sure to install all t ...

javascriptreactjstypescript

What could be the reason for the issue `injection "store" not found` showing up when attempting to call `this.store.commit()`?

I am currently working on storing values with VueX, specifically using Vuex 4.0 instead of the older version 3.0. While attempting to commit a value, I encountered an issue as follows: ... this.$store.commit("changerusername", u) ... To addres ...

javascriptvue.jsvuex

Angular's Motion Module

Incorporating Angular-5 into my project has introduced a plethora of animations on various pages. While the utilization of jQuery provides a straightforward approach for adding and removing classes to DOM elements, it is frequently advised against using jQ ...

jqueryhtmlcssangularanimation

Does Courier New font have any downsides?

Is it possible to highlight text in a flex textarea using htmlText when certain font tags are not supported? I am looking for a font that is the opposite of Courier New so that when embedded in Flash and written with a specific color, I can achieve a hig ...

htmlapache-flexfontshtmltext

Convert HTML style text annotations into a collection of dictionaries

Currently facing the following issue: Suppose I have a string "<a>annotated <b>piece</b></a> of <c>text</c>" To create a list with the desired result as [{"annotated": ["a"]}, {"piece": ["a", "b"]}, {"of": []}, {"te ...

pythonhtmlparsinghtml-parsingnlp

Generate a download link for the image being shown in a div element

I am working on a project where I need to display HTML content offline within a Windows Application. The application, developed in Autoplay Media Studio, includes an iexplore box to load the HTML. Before the application loads, I have set up a silent insta ...

javascriptjqueryhtmlimagedownload

Deleting a file and value in JavaScript

Can you help me figure out how to remove the value of q when the .close class is clicked? Here's my code: $(document).on('click', '.close', function () { $(this).parents('p').remove(); }) $('#Q1DocPath'). ...

javascriptjqueryfile-uploadjquery-file-upload

Is it possible to design this layout within a flex container while ensuring the specific order of elements remains intact for potential future swaps?

Check out this example layout <div class="flex"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item"& ...

htmlcssflexbox

A unique approach to handling ngdisabled for fields that are required only

Starting off with a requirement to disable the submit button when a required field is left empty. <form name="form"> <input type="text" placeholder="First Name" data-ng-model="model.firstName" name="FirstName" ng-required="true" /><br/> ...

javascripthtmlangularjs

"Mastering the Art of Placing the VuetifyJS Popover: A Comprehensive

When using VueJS with VuetifyJS material design components, how can I adjust the positioning of the Vuetify popover component to appear below the MORE button? The current placement is in the upper left corner which I believe defaults to x=0, y=0. Button: ...

javascriptvue.jsvuetify.js

Stylish CSS menu design

I am struggling to set up a top menu bar using float: left. How can I achieve the desired behavior for a top menu bar? The code snippet below demonstrates what I have tried so far: * { margin:0; padding: 0; } #menu { background-color: yell ...

cssuser-interfacemenu

Looking to automate the selection of a dropdown menu using Selenium with JavaScript

Below is the code snippet for a drop-down: <div class="w-1/2 px-8 pt-6"> <div class="Styled__FieldWrapper-sc-1fqfnqk-1 bQZNMa mb-6"> <label class="form-label" for="transfer.account">Transfer Acc ...

javascriptseleniumselenium-webdriver

Is there a way to customize the default settings for a blueprint’s menu item?

https://i.sstatic.net/aNeJY.jpg In my react project, I implemented the Menu using MenuItem from '@blueprintjs/core'. The issue I encountered is that when hovering over a Menu item with children, they open from the right side. Is there a way to m ...

htmlcssreactjsstyled-componentsblueprint