Responsive Bootstrap cards that maintain uniform height

I created a grid system with three columns: two equal and one smaller. However, I am facing an issue where I cannot set a height on the cards without using fixed pixel values. Ideally, I would like the three columns to have the same responsive height (100% of the page) with some cards occupying different percentages such as 75%, 50%, 25%, or 20% of the page.

Is there a method to define a fully responsive height for the cards without relying on pixel values?

Thank you!

CODE

<div class="row">
      <div class="col">
        <div class="card card1">
          <div class="card-body">
            <p class="card-text">With supporting .</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card card1">
          <div class="card-body">
            <p class="card-text">With supporting .</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="card card1">
          <div class="card-body">
            <p class="card-text">With supporting .</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card card1">
          <div class="card-body">
            <p class="card-text">With supporting .</p>
          </div>
        </div>
      </div>
    </div>
  </div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To ensure that all 4 cards have the same height, simply use the d-flex class as shown below.

<div class="col-3 d-flex">
  <div class="row">
    <div class="col">
      <div class="card card2">
        <div class="card-body">
          <p class="card-text">50% height</p>
        </div>
      </div>
    </div>
  </div>
  <div class="row ">
    <div class="col">
      <div class="card card2">
        <div class="card-body">
          <p class="card-text">50% height</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col d-flex">
  <div class="row">
    <div class="col">
      <div class="card card3">
        <div class="card-body">
          <p class="card-text">25% height</p>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="card card4">
        <div class="card-body">
          <p class="card-text">75% height</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

If you're comfortable with it taking up 50% of the screen's height, you can utilize the "vh" unit.

This CSS snippet proved effective in your code pen:

.card2 .card-body{ height: 50vh; }

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

An HTML element becomes invisible when its display property is set to none using CSS

One of the issues I'm facing is with a div element that should be hidden by default using display: none, but for some reason, the CSS statement seems to be ignored. In my project, there are three key files: index.html: This file contains all the bu ...

javascripthtml

Unable to establish the 'bootstrap' attribute for a value that is not declared

After installing Bootstrap using npm, I executed the following commands: npm install bootstrap npm install popper.js --save As a result, the directory tree looked like this: -node_module |__bootstrap |__jquery |__popper I then proceeded to use ...

jquerybootstrap-4popper.js

Is the image inside a responsive div?

I'm currently working on my first website that I am proud of, and I am in the process of creating a background using CSS and an image. I want it to look exactly like the picture. . I have successfully achieved this (accomplished already), but the is ...

htmlcssresponsive

Using the cordova-plugin-file to access and play video files stored on an external SD

I am in need of assistance with displaying an image and playing a video file from the root directory of an external SD card in my Cordova wrapped HTML project. I couldn't find a suitable place to ask these questions on the GitHub page for the cordova- ...

androidhtmlcordovavideocordova-plugin-file

HTML // jQuery - temporarily mute all audio for 10 seconds after page reload

Is there a way to automatically mute all audio sounds on my website for the first 10 seconds after it is reloaded, and then unmute again? <audio id="musWrited" autoplay> <source src="sound/soundl.mp3" type="audio/mp3" /> // < ...

javascriptjqueryhtmlaudio

My carousel navigation buttons are unresponsive in Bootstrap 4

Here's my code. I'm attempting to create an image carousel with button controls, but the images are not transitioning smoothly as intended. Additionally, the buttons seem to be unresponsive. <div class="carousel slide" id="cservices" data-ri ...

htmltwitter-bootstrapbootstrap-4

Achieving a bold border on top of an image without altering the image's dimensions

I'm in need of Photoshop-like selection functionality, but when I add a border to the enclosing div that holds the image, the image ends up smaller by twice the thickness of the border. How can I fix this issue? I have attempted a solution by adding ...

htmlcss

The TailwindCSS breakpoints are not being recognized in the styling

I am currently working on a NextJS 14 project where I am integrating Tailwind CSS. Here is a snippet of the code I am using: <div className="text-amber-dim md:text-amber flex-1 h-screen flex items-center justify-center"> <div classNam ...

cssreactjsnext.jstailwind-css

CSS: choose all elements starting from the n-th element and apply styles to them

Is it possible to choose specific child elements beyond the first few in a parent element? To clarify, let's say there's a div containing 7 spans. How can I select only the spans starting from the 3rd element onwards - so specifically span 4, 5, ...

csscss-selectors

Utilizing AngularJS in conjunction with Asp: UpdatePanel

<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/AdminMasterpage.master" AutoEventWireup="true" CodeBehind="ExamSet.aspx.cs" Inherits="demo.Admin.ExamSet" %> <asp:Content ID="Content1" ContentPlaceHolderID="content" runat="server"> <s ...

javascriptc#htmlasp.netangularjs

The color of the element remains unchanged even when hovering the cursor over it

Below is an example of HTML code: <h1 class="one">Hello</h1> Here is the corresponding CSS style sheet applied to it: h1:hover { color: red; } h1.one { color: blue; } When this code runs, the h1 element should turn blue. Ho ...

htmlcss

I am experiencing an issue with displaying email addresses on my webpage, as the "@" character is not showing up when I input them

My PHP code is injecting Email addresses into an HTML web page. However, when I inspect the element on the page, the Email address appears as Email: [email protected]. Strangely, the actual display on the page shows Bob Bob.com instead of the correc ...

phphtmlinclude

The issue with rendering CSS styles from <style></style> tags in Visual Studio while debugging in VB is causing a problem

<style> #ctrtable{width:600px;margin-left:auto;margin-right:auto;} </style> For the purpose of centering a table on the viewport, the above style block is added to the web page.   While using Visual Studio 2013 Express in debug mode, t ...

cssvb.netdebuggingwebvisual-studio-2013

When buttons are clicked within Angular Material's Card component, it automatically triggers the click event of the card itself

One of the challenges I'm facing is having a mat-card within a component template: <mat-card *ngFor="let p of products" (click)="viewProduct(p)"> <mat-card-actions> <button mat-stroked-button (click)="addProductToCart(p)"&g ...

htmlangulartypescriptangular-material

What is the reason that when a <div> click on a mobile device includes a jQuery ('#item').fadeOut() function, the CSS of the '#item' element maintains its previous hover state

While creating a mock back to top button, I encountered an issue with my jQuery call to fadeOut() behaving differently on mobile devices (this discrepancy can be observed using any desktop browser simulator). You can find the source code here: https://cod ...

javascriptjqueryhtmlcssmobile

What steps should I take to align the image in the middle left according to my third paragraph?

Looking to format my table row with the image on the left middle and three paragraphs in the center. The image should align with the text, but currently it is not aligned due to its positioning between "Nom" and "Type." <div class="my-container"> ...

htmlcss

The twelfth child in the sequence is not functioning properly, although the others are working correctly

In my list, I have 12 elements and each element contains a div. My goal is to set different sizes for each div by using nth-child on the li element. However, the configuration for the 12th element does not seem to work correctly compared to the rest of the ...

htmlcss

`Evaluating and contrasting information within a jQuery iteration`

Recently, I encountered an issue with a dynamically built table on my page that contains editable data fields. Here is an example snippet of the table structure: <tr> <td class="identifier">1</td> <td class="c1&q ...

htmljquery

javascript - Retrieving a JSON string

I am currently working on a stock website where I need to retrieve JSON information from either Google's API or Yahoo's API. To test this functionality, I have used a replacement function to log the data onto a text box for testing purposes. Howe ...

javascriptjqueryhtmljson

What could be causing my slider to malfunction?

No errors are being returned by the console. Currently utilizing Unslider. The setup includes: <div class="slider"> <ul> <li><img src="img/one.jpg" alt=""></li> <li><img src="img/one.jpg" ...

jqueryhtmlcssunslider