Is there a way to resolve this issue without the need for responsiveness?

I have been using the card element in Bootstrap, but I noticed that when I zoom in, the heights of these 3 cards become different due to the card title. Is there a way to fix this without relying on responsive techniques like @media queries?

Below is my HTML code:

<div class="row">
        <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
          <div class="card">
            <img src="img/card-img.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Massage Therapy</h5>
              <p class="card-text">Living winged said you darkness you're divide gathered and bring one seasons face great dr Waters firmamen: place which.</p>
              <button class="btn btn-hover">read more</button>
            </div>
          </div>
        </div>

        // The rest of the code for other similar cards
      </div>

My CSS code includes:

.content > .container .row .card {
    padding: 1.9rem;
}

.content > .container .row .card > .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
    position: relative;
}

.content > .container .row .card > .card-body > h5 {
    font-size: 2.3rem;
    margin: 4.2rem 0 2.9rem 0;
}

.content > .container .row .card > .card-body > p {
    font-size: 1.4rem;
    margin-bottom: 4.5rem;
    line-height: 2.6rem;
}

.content > .container .row .card > .card-body > button {
    width: 14rem;
    height: 4.4rem;
    font-size: 1.4rem;
}

View the image in normal size.

Zoom in to see the issue.

Thank you for your help and have a wonderful day!

htmlcssbootstrap-4responsivecard

Answer №1

All the .cols have been adjusted to ensure uniform height for your cards, allowing them to expand to 100% of the column width while maintaining consistent height regardless of content or zoom level.

.content > .container .row .card {
    height: 100%;
    padding: 1.9rem;
}


.content > .container .row .card {
    height: 100%;
    padding: 1.9rem;
}

.content > .container .row .card > .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
    position: relative;
}

.content > .container .row .card > .card-body > h5 {
    font-size: 2.3rem;
    margin: 4.2rem 0 2.9rem 0;
}

.content > .container .row .card > .card-body > p {
    font-size: 1.4rem;
    margin-bottom: 4.5rem;
    line-height: 2.6rem;
}

.content > .container .row .card > .card-body > button {
    width: 14rem;
    height: 4.4rem;
    font-size: 1.4rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="content">
  <div class="container">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
          <div class="card">
            <img src="img/card-img.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Massage Therapy</h5>
              <p class="card-text">Living winged said you darkness you're divide gathered and bring one seasons face great dr Waters firmamen: place which.</p>
              <button class="btn btn-hover">read more</button>
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
          <div class="card">
            <img src="img/card-img.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Massage Therapy With More Words</h5>
              <p class="card-text">Living winged said you darkness you're divide gathered and bring one seasons face great dr Waters firmamen: place which.</p>
              <button class="btn btn-hover">read more</button>
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
          <div class="card">
            <img src="img/card-img.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Massage Therapy with Even More Words</h5>
              <p class="card-text">Living winged said you darkness you're divide gathered and bring one seasons face great dr Waters firmamen: place which.</p>
              <button class="btn btn-hover">read more</button>
            </div>
        </div>
      </div>
    </div>
  </div>

Answer №2

One useful technique is to nest flex boxes and utilize Bootstrap 4 classes:

Here's a possible example for you to test behavior with a full-page layout

/* Add your custom css here if missing in bootstrap */
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/><div class="row">

  <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 d-flex flex-column">
    <div class="card flex-grow-1 d-flex flex-column" >
      <img src="http://dummyimage.com/200x50" class="card-img-top" alt="...">
      <div class="card-body flex-grow-1 d-flex flex-column ">
        <h5 class="card-title mx-auto">Massage <br>Therapy</h5>
        <p class="card-text mx-auto">Living winged said you darkness you're divide gathered and bring one seasons face great dr Waters firmamen: place which.</p>
        <button class="btn btn-hover alert alert-info mx-auto">read more</button>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 d-flex flex-column">
    <div class="card flex-grow-1 d-flex flex-column">
      <img src="http://dummyimage.com/200x50" class="card-img-top" alt="...">
      <div class="card-body flex-grow-1 d-flex flex-column ">
        <h5 class="card-title mx-auto">Massage Therapy</h5>
        <p class="card-text my-auto">Living winged .</p>
        <button class="btn btn-hover alert alert-info mx-auto">read more</button>
      </div>
    </div>
  </div> <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 d-flex flex-column">
    <div class="card flex-grow-1 d-flex flex-column">
      <img src="http://dummyimage.com/200x50" class="card-img-top" alt="...">
      <div class="card-body flex-grow-1 d-flex flex-column ">
        <h5 class="card-title mx-auto">Massage </h5>
        <p class="card-text my-auto">Living winged said you darkness you're divide gathered and bring one seasons face great dr Waters firmamen: place which.</p>
        <button class="btn btn-hover alert alert-info mx-auto">read more</button>
      </div>
    </div>
  </div>
</div>

https://getbootstrap.com/docs/4.5/utilities/display/ & https://getbootstrap.com/docs/4.5/utilities/spacing/

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

The CSS float puzzle - text alignment dilemma

Recently, I created a simple float-based banner with tiles which you can see here on jsfiddle. However, I encountered a major issue with centering text in each tile. My goal is to have all the "Sample text" content centered both horizontally and vertically ...

htmlcss

What is the reason for Bootstrap requiring both a class name and an ID name for collapse functionality?

When implementing the collapse effect in Bootstrap, why do buttons need to refer to the data-toggle=collapse class and the data-target=#collapseExample ID of the panel for the effect? Wouldn't simply targeting the ID be enough to toggle its state? Co ...

jquerycsshtmltwitter-bootstrap

Creating a responsive div section following the navigation bar using Bootstrap

Seeking advice on how to position a div region containing page content beneath a navbar without using margin-top. Currently, I have implemented margin-top:200px, but I am uncertain if this approach is responsive or if there is a better method available. T ...

htmlcsstwitter-bootstrap

Is it truly impossible to align text around an image using flexbox?

In typical situations, you can easily float an image left or right to wrap text around it. However, in flexbox layouts, floating elements do not work as expected and finding a solution can be challenging. It is worth noting that Bootstrap 4 will be implem ...

cssflexboxtwitter-bootstrap-4

Reserved space for both double and single quotation marks

I've created a function that generates a table of specified size with predetermined content in each cell, and displays it within a designated div ID. generate_table(4, 4, 'Cell Content', 'display') To test this function, I added a ...

javascripthtml

history.js - failure to save the first page in browsing history

I have implemented the history.js library to enable backward and forward browser navigation on an AJAX products page triggered by clicking on product categories. While I have managed to get this functionality working smoothly, I am facing a particular iss ...

javascriptjqueryhtml

Order of flexbox items when placed within separate divs?

Looking to rearrange the order of items using flexbox, but hitting a roadblock because one of the items I want to reorder is in a different div and not a direct child of the same parent as the other items. <div class="wrapper"> <div class="some ...

htmlcssflexbox

Is it feasible to animate a JQuery slider?

Is there a way to animate the slider using jQuery? I want to be able to press a button and have the inner part of the slider move slower (e.g. 300ms) without reacting to mouse clicks and slides. Here is the code: http://jsfiddle.net/gm4tG/5/ HTML: <d ...

javascriptjquerycssjquery-mobilecordova

Inheritance in SASS - excluding the parent class

Can I apply this syntax to inherit a class in SASS? Code .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } Output .message, .success, .error, .warning { border: 1px solid # ...

cssinheritancesass

Distribute divs of equal width evenly within a grid

I'm facing a unique challenge at the moment. I'm attempting to create a grid system where all elements have a fixed width of 200px each. What I envision is a clever grid setup using only CSS, where each "row" will strive to accommodate as many el ...

htmlcss

Removing from MySQL database results in PHP form not being shown

I'm having trouble figuring out why my form isn't showing up. Below is the code for PostDelete.php: <?php session_start(); $username=$_SESSION['uname']; // Process delete operation after confirmation if(isset($_POST["pid"]) &a ...

phphtmlcssbootstrap-4

Create a table by incorporating the information from the page along with additional content

I need to extract the data from a list and convert it into a table, add some additional content that I will provide, and then align the table accordingly. While I can easily align elements and already have the list, I am facing difficulty in converting it ...

javascriptjqueryhtmlcss

Setting up an image background in three.js: A beginner's guide

I tried setting up an image background for my scene with a globe in three.js, but unfortunately, the main object of my scene turned black (the same color as the background). I attempted using the following method: renderer = new THREE.WebGLRenderer({ anti ...

javascriptcssthree.js

Issue with border radius not applied to input-group in Bootstrap 3

Can anyone explain why the input-group in Bootstrap 3.4 is missing all border radius? <form action="{{ route('dashboard.users.index') }}" method="get"> <div class="input-group"> <input type="text" name="search" class="f ...

csstwitter-bootstrap-3

Tips for efficiently implementing AJAX requests for multiple forms within a single webpage

Previously, I had a form where clicking submit would hide the form and display the result on a div with classname=dig. However, after adding more forms, all the forms started submitting at the same time instead of individually. How can I fix this issue in ...

javascriptjqueryhtmlajax

After clicking multiple times within the modal, the modal popup begins to shift towards the left side

I successfully implemented a modal popup in my project, but encountered an issue where the popup moves to the left side if clicked multiple times. Despite searching extensively online, I have not been able to find a solution to this problem. Below is the ...

javascriptjqueryhtmlcss

Ways to increase the values in a textbox

My task involves handling checkboxes that are populated with data from a database. The goal is to have certain checkboxes pre-checked based on the retrieved data, and if any are not checked, their values should be entered into a textbox. For instance, con ...

javascriptjqueryhtmlajax

Conflicting behavior between jQuery focus and blur functions and retrieving the 'variable' parameter via the $_GET method

There is a simple focus/blur functionality here. The default value shown in the 'Name of Venue' input field changes when the user clicks on it (focus) and then clicks away(blur). If there is no text entered, the default value reappears. Input fi ...

phpjavascriptjqueryhtml

Remove a textbox dynamically in jQuery using solely jQuery without the use of traditional JavaScript code

My code is aimed at creating a dynamic way to add and remove textboxes. However, I am encountering a problem where clicking the delete button removes everything instead of just one textbox. Can anyone spot the error in my code or offer a solution to remo ...

javascriptjqueryhtmlcss

AngularJS version is a software update for the Angular

I recently started learning AngularJs and have been following the Oreilly AngularJS book. I was able to successfully run this code with Angular version 1.0.8, but it doesn't work with newer versions of Angular. Can someone tell me why? <!DOCTYPE h ...

javascripthtmlangularjs