Two columns of equal height featuring three card UI elements

I'm currently working with Bootstrap 4 and I have a grid set up with 1 row containing 2 columns and 3 card elements. However, I am struggling to adjust the height of the blue card element to align with the yellow card element.

I want both cards to have the same height. I have tried various solutions without success, including referencing this article and using the following code snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8">
      <div class="card card-info">
        <div class="card-header">
          <h3 class="card-title">My Title</h3>
          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                        </button>
          </div>
        </div>
        <div id="start-text" class="card-body">
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non hic vero quae assumenda animi provident quis, est cumque at aspernatur doloribus incidunt fugiat alias rerum doloremque, aliquid sed nesciunt corporis? Lorem ipsum dolor sit, amet consectetur
          adipisicing elit. Accusamus atque, dolor deleniti perspiciatis, aut ullam culpa praesentium ab optio eveniet, ut quidem accusantium est maiores quas provident. Optio, culpa a.
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card card-success">
        <div class="card-header">
          <h3 class="card-title">My Title</h3>
          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                        </button>
          </div>
        </div>
        <div id="start-text" class="card-body">
          <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti veritatis placeat non, culpa autem mollitia neque consequuntur, tempore tempora possimus eius reiciendis minima nemo obcaecati, recusandae itaque veniam error nam!</p>
        </div>
      </div>
      <div class="card card-warning">
        <div class="card-header">
          <h3 class="card-title">My Title</h3>
          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                        </button>
          </div>
        </div>
        <div id="start-text" class="card-body">
          <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti veritatis placeat non, culpa autem mollitia neque consequuntur, tempore tempora possimus eius reiciendis minima nemo obcaecati, recusandae itaque veniam error nam!</p>
        </div>
      </div>
    </div>
  </div>
</div>

https://i.sstatic.net/zvZQB.png

htmlcssbootstrap-4flexbox

Answer №1

To make a card full height, add h-100.

Simply update your HTML:

<div class="container-fluid">
  <div class="row">
      <div class="col-md-8">
          <div class="card card-info h-100">
              <div class="card-header">
                  <h3 class="card-title">My Title</h3>
                  <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                      </button>
                  </div>
              </div>
              <div id="texto-inicio" class="card-body">
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non hic vero quae assumenda animi provident quis, est cumque at aspernatur doloribus incidunt fugiat alias rerum doloremque, aliquid sed nesciunt corporis?
                  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus atque, dolor deleniti perspiciatis, aut ullam culpa praesentium ab optio eveniet, ut quidem accusantium est maiores quas provident. Optio, culpa a.
              </div>
          </div>
      </div>
      <div class="col-md-4">
          <div class="card card-success">
              <div class="card-header">
                  <h3 class="card-title">My Title</h3>
                  <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                      </button>
                  </div>
              </div>
              <div id="texto-inicio" class="card-body">
                  <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti veritatis placeat non, culpa autem mollitia neque consequuntur, tempore tempora possimus eius reiciendis minima nemo obcaecati, recusandae itaque veniam error nam!</p>
              </div>
          </div>
          <div class="card card-warning">
              <div class="card-header">
                  <h3 class="card-title">My title</h3>
                  <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                      </button>
                  </div>
              </div>
              <div id="texto-inicio" class="card-body">
                  <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti veritatis placeat non, culpa autem mollitia neque consequuntur, tempore tempora possimus eius reiciendis minima nemo obcaecati, recusandae itaque veniam error nam!</p>
                  </p>
              </div>
          </div>
      </div>
  </div>
</div>

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

What is the best way to animate an element when it comes into the user's view

In order to activate the animation of the skill-bars when the element is displayed on the website, I am seeking a solution where scrolling down through the section triggers the animation. Although I have managed to conceptualize and implement the idea with ...

javascripthtmlcssanimation

Modify the text or background shade of the Bootstrap date picker

I have successfully integrated the bootstrap date picker (view figure below) and it is functioning as expected. The code appears like this: <div class="input-group date"> <input name="departure" type="text" class="form-control" id="departure" ...

jquerycsshtmltwitter-bootstrap

Building an Array in PHP

When a user submits a form with multiple text inputs that share the same name attribute, how can I handle this in my PHP code? Example HTML: <input type="text" name="interest"/> ...

phphtml

Curved edges, Layering, Content overflow restriction

My design consists of two circular divs with the border-radius property set to its max value. The first circle contains a header div with a unique background-color and overflow:hidden to create the illusion that the top portion of the circle has a differen ...

overflowz-indexcsscss-position

Shifting HTML table in Javascript by toggling checkboxes

When I click the checkbox, the table elements are not displaying inline. I am simply hiding the class "box". Do I need to write a special format? By default, the elements are displayed inline but when I check the checkbox, they shift. The column 'Stat ...

javascripthtmljquerycss

Customizing Material-UI Grid: Is it possible to assign a background color solely to the cells, without affecting the surrounding empty spaces?

I've been experimenting with designing a grid system that incorporates a gradient background color. The issue I'm facing is that the background color extends to the empty spaces between the grid cells as well. Is there a way to scope the gradient ...

cssmaterial-ui

Stop the Form from Submitting When Errors are Present

In the midst of explaining my issue, I must first share details about a form I'm developing. It's a Registration form where upon submission by clicking Submit, users won't immediately reach a Successfully Registered page. Instead, they' ...

javascriptphpjqueryhtmlforms

Unable to make a div grow within a Popper component in a React.js application

I'm facing a challenge with implementing a CSS feature and need some assistance. https://i.stack.imgur.com/KXpGd.png Upon clicking the "See link options" button, the content loads but spills out of the popper. My goal is to have the popper expand in ...

javascripthtmlcssreactjsfrontend

Creating a Smooth Curve with CSS

Recently, I've decided to create a unique clock design inspired by the one showcased here. However, instead of using images like they did, I would like to implement ARC. Is it possible to create an arc using only CSS? For instance, if I wanted to make ...

htmlcss

What can be done to prevent divs from overlapping? They display properly on a computer browser, but not on mobile devices like phones or tablets

Recently, I took on the task of creating an eBay template for someone. With some assistance and a bit of trial and error, I managed to get it working, albeit with what I like to call "not-so-great" code. However, there is one issue that arises when viewing ...

androidjquerycsshtml

The Django template fails to implement CSS styling

I am trying to apply text-align: justify and reduce the text width on a Django template file, but it seems that my CSS isn't working for only this specific element. I have no idea how to solve this issue even though my static files and direction are f ...

htmlcssdjangodjango-templates

Enhance Your Website with HTML5 Video Transition Effects

Is it possible to recreate video transition effects using HTML5 similar to the ones shown in this example: Can this be achieved across all major browsers, including Safari, Firefox, Chrome, and IE9? ...

jquerycsshtmleffectstransition

Modify the appearance of the element that is currently chosen

I have a navigation menu and I would like to change the style of the element that is selected from the list in the navigation menu. I am using React with the Grid element from material-ui. NavigationMenu.tsx: import React, { useState, useEffect } from "r ...

cssreactjsmaterial-ui

block height has become a constant challenge for me - despite my various attempts, I still cannot seem

Struggling with adjusting the height of my posts. Any help would be appreciated! For more details, please visit: <li> <div class="thumb-img"> <a title="Hiring a Professional Designer for Your Kitchen" href="http://www.mulberrydesignerkitc ...

htmlcss

How can I apply bold styling to my interpolation binding in Angular while working on my HTML code?

Below is the code snippet where I am attempting to highlight profile.userId: <p class="profile__last-login" *ngIf="profile.lastLoggedIn"> {{'intranet.profile.dashboard.lastLoggedIn' | messageBundle: profile.userId + ',' + (pr ...

htmlcssangular

Display and conceal individual divs using jQuery

Despite my lack of experience with jQuery, I am struggling with even the simplest tasks. The goal is to display/hide specific messages when certain icons are clicked. Here is the HTML code: <div class="container"> <div class="r ...

javascripthtmljquerycssjquery-events

Using array.map() in React does not display elements side by side within a grid container

I'm currently working with React and material-ui in order to achieve my goal of displaying a grid container that is populated by an array from an external JavaScript file. The challenge I am facing is getting the grid to show 3 items per row, as it is ...

javascripthtmlreactjsmaterial-ui

Is there a way for me to determine which .js script is modifying a particular HTML element?

Let's take a look at a specific website as an example: This particular website calculates value using a .js script embedded in the HTML itself. Upon inspecting the source code by pressing F12, we can locate the element containing the calculated valu ...

javascripthtmljquerycssreverse-engineering

What makes the transparent border colors on <tr> appear too dark?

For instance, take a look at this code: http://jsfiddle.net/WaJy7/ In my attempt to apply a semi-transparent border to every <tr> element, I've encountered an issue where the color of the border appears darker than intended for all rows except ...

htmlcss

Leveraging python's BeautifulSoup library, one can easily implement HTML selection

Recently, I've started diving into Automate the Boring Stuff and exploring how to create my own programs. Currently, I'm experimenting with beautiful soup's 'select' method in order to extract the value '33' from this cod ...

pythonhtmlcssbeautifulsoup