Adjust the size of bootstrap card titles to match up with the image on the page

I am facing an issue where the title of the second card is pushing the image down. Is there a way to dynamically resize the card title to align all the images properly? Any help would be appreciated.

https://i.sstatic.net/PRRHl.png Bootstrap Card 

</head>
<body> 
 
<div class="container-fluid">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
  <div class="col">
    <div class="card bg-primary">  
      <div class="card-body text-center">
        <h4 class="card-title">John Doe</h4>
        <img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image">        
        <p class="card-text">Some text inside the first card</p>
      </div>
    </div>
  </div>
  
  <div class="col">
    <div class="card bg-primary">
      <div class="card-body text-center">
        <h4 class="card-title">John Doe & other possible long text that pushes the image down  </h4>
        <img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image">        
        <p class="card-text">Some text inside the second card</p>
      </div>
    </div>
  </div>
  
  <div class="col">
    <div class="card bg-primary">
      <div class="card-body text-center">
        <h4 class="card-title">John Doe </h4>
        <img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image">        
        <p class="card-text">Some text inside the third card</p>
      </div>
    </div>
  </div> 
  
  </div>
</div>

</body>
</html>

JsFiddle code

cssimagealignmentbootstrap-5bootstrap-cards

Answer №1

An effective way to achieve a uniform layout is by including a style attribute such as "height: 4vw;" in the h4 title card. This will ensure that all images are pushed down by the same distance, resulting in a consistent alignment across the board.

Answer №2

When dealing with a long text on your card that might vary in length, making it challenging to set a fixed height, one solution is to utilize JavaScript to dynamically adjust the height based on the content. This can be achieved by setting the height on page load and listening for any changes to the page size.

const titleList = document.querySelectorAll(".title-section");

function sizeTitleSections () {
    let tallest = 0;
    titleList.forEach(element => {
        element.style.height = null;
    });
    titleList.forEach(element => {
        let thisHeight = element.clientHeight;
        if (thisHeight > tallest) {
            tallest = thisHeight;
        }
    });

    titleList.forEach(element => {
        element.style.height = tallest + "px";
    })
}

sizeTitleSections();

window.addEventListener('resize', sizeTitleSections);
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1838e8e959295938091a1d4cfd1cfd1cc83849580d2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2d20203b3c3b3d2e3f62262c20213c0f7e617b617e">[email protected]</a>/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ae8e5e5fef9fef8ebfacabfa4baa4baa7e8effeebb9">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<div class="container-fluid my-5">
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
        <div class="col mb-3">
            <div class="card h-100 bg-primary">
                <div class="card-body text-center">
                    <h4 class="card-title title-section">John Doe</h4>
                    <img class="card-img-top" src="https://via.placeholder.com/500" alt="Card image">
                    <p class="card-text">Some text inside the first card</p>
                </div>
            </div>
        </div>

        <div class="col mb-3">
            <div class="card h-100 bg-primary">
                <div class="card-body text-center">
                    <h4 class="card-title title-section">John Doe & other possible long text that push the image down </h4>
                    <img class="card-img-top" src="https://via.placeholder.com/500" alt="Card image">
                    <p class="card-text">Some text inside the second card</p>
                </div>
            </div>
        </div>

        <div class="col mb-3">
            <div class="card h-100 bg-primary">
                <div class="card-body text-center">
                    <h4 class="card-title title-section">John Doe </h4>
                    <img class="card-img-top" src="https://via.placeholder.com/500" alt="Card image">
                    <p class="card-text">Some text inside the third card</p>
                </div>
            </div>
        </div>

    </div>

I opted to use images from placeholder.com as the images from w3schools.com were occasionally slow to load.

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

div that adjusts its max-width to always perfectly match the width of its contents

Check out this jsfiddle for more information: http://jsfiddle.net/tN6QE/2/ The CSS code we are using is as follows: div { display: inline-block; border: solid 1px black; padding: 10px; max-width: 200px; } We are dealing with two scenarios here. ...

htmlcss

The disappearance of the checkbox is not occurring when the text three is moved before the input tag

When I move text three before the input tag, the checkbox does not disappear when clicked for the third time. However, if I keep text three after the input tag, it works fine. Do you have any suggestions on how to fix this issue? I have included my code be ...

javascriptjqueryhtmlcssangularjs

Tips for incorporating your personal touch while utilizing Snipcart

I have created an ecommerce platform with GatsbyJS and Snipcart, but I am struggling to override the default theme provided by Snipcart. When I try to change the main default CSS through gatsby-config.js, it does not seem to work. Does anyone have a soluti ...

javascriptcssreactjssnipcart

Ways to move upward from a lower position

I am trying to create a hover effect where the title and content move to the right position upon hovering. The issue I am facing is that the transition on the `Title` class is not working, and as a result, the hover effect is also not functioning properly ...

htmlcss

Difficulty arises when trying to merge a dropdown menu with a horizontally scrolling menu

I am attempting to include a dropdown menu within a horizontally long menu. In order to achieve this, I have merged the script for displaying a scrollable menu with that of a dropdown menu. However, in doing so, the dropdown menu does not pop out from the ...

jquerycssmenu

Utilize ASP to limit the application of a CSS file exclusively to the child page

My website consists of a master page and several child pages. I have created specific CSS classes for styling. However, I only want certain child pages to utilize these styles while the master page should always use them. How can I limit the access to th ...

.netcss

Can you explain the function of the forward slash in the HTML img tag?

Currently, I am in the process of learning html/css by following the tutorial provided by W3Schools.com. The part of the code that is causing me some difficulty can be found at http://www.w3schools.com/css/tryit.asp?filename=trycss_vertical-align Specific ...

htmlcssimage

Set a maximum height for an image without changing its width dimension

I am facing an issue with an image displayed in a table. The image is a graph of profiling information that can be quite tall (one vertical pixel represents data from one source, while one horizontal pixel equals one unit of time). I would like to set a ma ...

javascripthtmlcssimage

Switch the image source when hovering over a text menu

Currently, I have been using the following code to switch between images. However, what I actually want to do is change the image when hovering over the title link of the image. onmouseover="this.src='Images/img.png'" onmouseout="this.src=' ...

javascriptjqueryhtmlcssimage

Access, spin, and store picture

I'm currently working on a simple code that involves opening, rotating, and saving an image under the same name. I've gathered information from various threads, but it seems like something is not right. $filename = './uploads/' . $newN ...

phpimage

The jQuery UI Sortable functions are being triggered at lightning speed

I am currently working on a project where users can create a seating chart, add rows and tables, and move the tables between different rows. The functionality for adding rows and moving tables already exists in the code. However, I am facing an issue where ...

javascriptjqueryhtmlcssjquery-ui

The styling of Bootstrap CSS is not displaying correctly within the body of the webpage

I'm facing an issue where the content in the body of my page is not rendering correctly due to a problem with my bootstrap css. Specifically, the paragraph tag seems to be rendering inside the image tag even though both are within the body. @{ Lay ...

cssasp.net-mvcbootstrap-4

What is the method to reduce the gap between the label and field in Vuetify input controls?

Consider a custom Vuetify text field as an example (Playground) <template> <v-app> <v-container> <v-text-field label="label goes here" variant="plain" density="compact" ...

htmlcssvuetify.js

Overlapping Dropdown Javascript Menus

To achieve the desired effect in the header, I need to create two expandable dropdown menus for the first two titles. My coding experience is limited, especially when it comes to javascript and jquery. Currently, I have managed to create the effect for one ...

javascriptjqueryhtmlcss

Two objects precisely located in the same spot yet not visible simultaneously

There are two elements here. One is a transparent button, and the other is an image positioned behind it. The background property didn't work for me, so I attempted different variations without success: .top-container > button { background-ima ...

htmlcsscss-positionbackground-image

The ultimate guide to personalizing group titles in Angular UI-Select

Is there a way in Angular ui-select to customize the group label? I want to make it larger than the selection items as shown in the image below. https://i.stack.imgur.com/ofcak.png The list is currently grouped by country, but how can I adjust the size o ...

javascripthtmlcssangularjsangular-ui-select

Bars of varying heights (Google Chart)

I have incorporated a Google chart within a mat-grid-tile. In this setup, one column displays a value of 50, while the other showcases a value of 30. These particular values are sourced from myService and are accurate. Although when I hover over the bars i ...

htmlcssangulartypescriptgoogle-visualization

Creating dynamic images in Node.js using JavaScript without relying on HTML5 canvas

Hello everyone, I'm excited to be posting my first question on stackoverflow! Hey there, it's wabsol. I've been diving into the world of nodejs and loving every minute of it. I'm interested in creating a window and/or drawing an image ...

javascriptnode.jsimage2drendering

Issue with CakePdf unable to properly render CSS styling

I am having issues with the CakePdf Plugin (CakePdf.DomPdf) as it is not recognizing my stylesheet. Despite copying my /View/Layouts/default.ctp to /View/Layouts/pdf/default.ctp, the pdf file generated does not reflect the styling. Could this be due to t ...

csscakephp

Guide to leveraging clsx within nested components in React

I am currently using clsx within a React application and encountering an issue with how to utilize it when dealing with mappings and nested components. For instance: return ( <div> <button onClick={doSomething}>{isOpened ? <Component ...

javascriptcssreactjstypescriptclsx