Maintaining consistent height across all elements in a column while preserving margin: a guide

My query revolves around filling the contents of two columns with different heights within a row. Although the columns themselves are of equal height, the cards inside them are not.

+---------------------------+---------------------------+
| +-----------------------+ | +-----------------------+ |
| |                       | | |                       | |
| |                       | | |                       | |
| |                       | | |                       | |
| +-----------------------+ | |                       | |
|                           | |                       | |
|                           | |                       | |
|                           | |                       | |
|                           | +-----------------------+ |
+---------------------------+---------------------------+

Adding the .h-100 class to the first card results in it losing its bottom margin, causing misalignment with the other one. Applying h-100 to both cards ensures they have the same height but sacrifices the bottom margin on both. Is there a correct approach to achieving full height for the cards in each column?

https://jsfiddle.net/yjfzvpoh/1/

Review this code snippet:

<style>
.card {
position: relative;
margin-bottom: 1.5rem;
width: 100%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="690b06061d1a1d1b0819295c4758475a">[email protected]</a>/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791b16160d0a0d0b1809394c5748574a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-6">
    <div class="card h-100">
      <div class="card-body">
        <div class="row">
          <div class="personal-information mt-30">
            <div class="name-text">
              <h6 class="font-14"><span class="text-muted">Trabajador :</span> Ninguno asociado</h6>
              <h6 class="font-14"><span class="text-muted">E-mail :</span> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85eff6f1f0e4f7e1eac5e1e0f6fcf1e0e6abe6eae8">[email protected]</a></h6>
              <h6 class="font-14"><span class="text-muted">Teléfono :</span> </h6>
              <h6 class="font-14"><span class="text-muted">Cliente :</span> Ninguno asignado</h6>
              <h6 class="font-14"><span class="text-muted">Empresas :</span> Ninguna asignada</h6>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
   ...
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <div class="card">
      <div class="card-body">
This is another card
      </div>
    </div>
  </div>
</div>

Would it be viable to make the left div match the height of the right div? Essentially, both div elements should have the same inner height as the one belonging to the row class.

htmlcssbootstrap-5

Answer №1

I have come up with a workaround to address this issue - by incorporating a wrapper for each card, utilizing padding as margin, and setting all the cards to 100% height.

The column dimension has been adjusted to col-6 from col-md-6 for visibility in this example.

https://jsfiddle.net/yt0e5nxb/

<style>
.card-wrapper {
  padding-bottom: 1.5rem;
  height: 100%;
}
.card {
  position: relative;
  height: 100%;
  width: 100%;
}

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c6cbcbd0d7d0d6c5d4e4918a958a97">[email protected]</a>/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f1eaf5eaf7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
   <div class="container">
    <div class="row">
  <div class="col-6">
    <div class="card-wrapper">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="personal-information mt-30">
              <div class="name-text">
                <h6 class="font-14"><span class="text-muted">Worker:</span> None assigned</h6>
                <h6 class="font-14"><span class="text-muted">Email :</span> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4bea7a0a1b5a6b0bb94b0b1a7ada0b1b7fab7bbb9">[email protected]</a></h6>
                <h6 class="font-14"><span class="text-muted">Phone :</span> </h6>
                <h6 class="font-14"><span class="text-muted">Client :</span> None assigned</h6>
                <h6 class="font-14"><span class="text-muted">Companies :</span> None assigned</h6>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-6">
    <div class="card-wrapper">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Change Password</h3>
        </div>
        <div class="card-body">
          <div class="row align-items-center">
            <div class="col">
              <h6 class="font-14 mb-0">
                <i class="fa fa-user-o me-2 text-info"></i>Username
              </h6>
            </div>
            <div class="col-auto">
              <span class="font-14">jstuardo</span>
            </div>
          </div>
          <form action="/Account/Manage" autocomplete="off" class="needs-validation pwd-form" id="frmChange" method="post" novalidate="novalidate" role="form"><input name="__RequestVerificationToken" type="hidden" value="YoNbftpwnbNFettprMIOSZgRixGJkdGWjWERzrXeZYESy0sKEYkLxphjFXtG3H7Nz0PKmU91hgGUGbgBuXhY4kc3yyx7-27oWj2IgVEEkwbutZEaWYP-PVyiYgrRx5-Pvhk1n6cq6lewMmrwtthNJA2">
            <hr class="my-3">
            <div class="row align-items-center">
              <div class="col">
                <h6 class="font-14 mb-0">
                  <i class="fa fa-key me-2 text-success"></i>Current Password
                </h6>
              </div>
              <div class="col-auto">
                <div class="input-group">
                  <input name="OldPassword" autocomplete="new-password" class="form-control" data-val="true" data-val-length="Password must be at least 6 characters." data-val-length-max="50" data-val-length-min="6" id="OldPassword" maxlength="50" required="required"
                    type="password">
                  <span toggle="#OldPassword" class="fa fa-fw fa-eye-slash field-icon toggle-password"></span>
                  <div class="invalid-tooltip">
                    Please enter the current password.
                  </div>
                </div>
              </div>
            </div>
            <hr class="my-3">
            <div class="row align-items-center">
              <div class="col">
                <h6 class="font-14 mb-0">
                  <i class="fa fa-key me-2 text-danger"></i>New Password
                </h6>
              </div>
              <div class="col-auto">
                <div class="input-group">
                  <input name="NewPassword" autocomplete="new-password" class="form-control" id="NewPassword" maxlength="50" required="required" type="password">
                  <span toggle="#NewPassword" class="fa fa-fw fa-eye-slash field-icon toggle-password"></span>
                  <div class="invalid-tooltip">
                    Please enter the new password.
                  </div>
                </div>
              </div>
            </div>
            <hr class="my-3">
            <div class="row align-items-center">
              <div class="col">
                <h6 class="font-14 mb-0">
                  <i class="fa fa-key me-2 text-primary"></i>Confirm Password
                </h6>
              </div>
              <div class="col-auto">
                <div class="input-group">
                  <input autocomplete="new-password" class="form-control" data-val="true" data-val-equalto="Password and confirmation do not match." data-val-equalto-other="*.Password" id="ConfirmPassword" maxlength="50" name="ConfirmPassword" required="required"
                    type="password">
                  <span toggle="#ConfirmPassword" class="fa fa-fw fa-eye-slash field-icon toggle-password"></span>
                  <div class="invalid-tooltip">
                    Incorrect confirmation.
                  </div>
                </div>
              </div>
            </div>
          </form>
          <hr class="my-3">
          <div class="row align-items-center">
            <div class="col"></div>
            <div class="col-auto">
              <span class="font-14"><button type="submit" class="btn btn-success" id="btnChange"><i class="fa fa-key me-2"></i>Change Password</button></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
    </div>
    <div class="row">
  <div class="col-md-12">
    <div class="card-wrapper">
      <div class="card">
        <div class="card-body">
This is an additional card
        </div>
      </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

Using javascript to transform the entire list item into a clickable link

Currently, I am using PHP in WordPress CMS to populate slides on a slider. Each slide contains a link at the bottom, and my goal is to target each slide (li) so that when clicked anywhere inside it, the user is directed to the URL specified within that par ...

javascriptphpjqueryhtmlcss

The form includes Bootstrap columns and a button, but there is noticeable wasted space within the

This is the form structure I am working with: <form method="GET" action="."> <div class="container-fluid pt-2 px-5 py-3"> <div class="row g-4"> <div class= ...

htmlcssbootstrap-5

Consistent manipulation of the DOM through the Drag/Touchmove event

Seeking to incorporate Mobile Components through native Javascript and AngularJS. During my work on developing a Pull To Refresh directive for AngularJS, I utilized the touchmove event on a UL list. The goal was to pull a concealed div over a list with cu ...

javascriptcsshtmlangularjs

To implement a class based on a media query, only pure CSS or HTML is required

Is there a way to apply a specific class to an ID based on screen height using only CSS, HTML, or LESS without pre-compilation? The goal is to set classes from Add2Any, not CSS properties. Here is a link to the jsfiddle. The desired outcome is to have th ...

htmlcssresponsive-designlesssocialshare

Is it possible for an Android webview to access the device's geo location?

For the application I'm working on, it's necessary to access the user's geo location. We've created a HTML 5 based website and are using a webview to develop our mobile application by calling the website URL. With the latest geo tags av ...

androidhtmlwebviewgeolocation

What methods can I use to make sure the right side of my React form is properly aligned for a polished appearance?

Trying to create a React component with multiple input field tables, the challenge is aligning the right side of the table correctly. The issue lies in inconsistent alignment of content within the cells leading to disruption in overall layout. Experimente ...

javascripthtmlcssreactjstypescript

Enhancing List Numbers with CSS Styling

Is there a way to customize the appearance of numbered lists? I created an ordered list and would like to modify the numbering style To remove the bullets And adjust the color and background ...

htmlcss

Create precise shapes by tracing images with an SVG generator

Does anyone know of a SVG generator that allows me to trace and save a specific shape from an image as an SVG file? I've come across generators that generate the entire image, but I only want to save a particular shape. For example, if there is an im ...

htmlsvggenerator

The dropdown feature in AngularJS experiencing sporadic malfunctions on Google Chrome

HTML: <select id="bId" ng-options="b as b.name for b in books" ng-model="selectedBook" ng-change='onBookChange()'> </select> The issue: The options are not always displaying and the selected option is not visible. List ...

htmlangularjs

What are the steps to create two adaptable blocks and one immovable block?

Check out this HTML code snippet: <div style="border: 1px solid #000; width: 700px; line-height: 38px; display: block"> <div style="margin-left:10px;width: 222px; float: left; margin-right: 10px;"> Enter your question </div& ...

htmlcss

Guide to displaying a pop-up modal containing text and an image when clicking on a thumbnail image

Recently delving into Bootstrap 3, I created a thumbnail grid showcasing images related to various projects. My goal is to have a modal window pop up when clicking on an image. Within the modal, I want to display the selected image alongside some descrip ...

javascriptjqueryhtmltwitter-bootstrap-3

Navigating Your Way Through the Center (ASP.NET MVC)

My navbar has elements that I want to center within it, but using margin hasn't been successful. Do you have any suggestions on how I can achieve this alignment using CSS? This is the code snippet: <div class="navbar "> <div class="cont ...

htmlcssasp.netasp.net-mvctwitter-bootstrap

Change the background color of the entire grid page to create a unique look

Is there a way to make the background color different for blocks 3 through 6 while maintaining a full-page background color effect without any padding or margin? .container { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5%; ...

htmlcsscss-grid

Tips on using b-table attributes thClass, tdClass, or class

<template> <b-table striped hover :fields="fields" :items="list" class="table" > </template> <style lang="scss" scoped> .table >>> .bTableThStyle { max-width: 12rem; text-overflow: ellipsis; } < ...

javascriptcssnode.jsvue.jsbootstrap-vue

Create a variety of charts using the same data object in Highcharts

Is it possible to display two (or three) different charts on the same page using Highcharts without creating separate div elements and only utilizing one object? I have created a screenshot to illustrate my question: You can view the code example on JSFi ...

javascripthtmlhighcharts

What is the process for embedding a 3D model using three.js into a specific div on a webpage?

Lately, I've been struggling with a persistent issue. I can't seem to figure out how to integrate my three.js scene into a div on my website. Despite watching numerous YouTube videos and reading countless articles on the topic, I still haven&apos ...

javascripthtmlcsswebthree.js

Error 404 - CSS file missing: encountering a 404 error while attempting to execute Flask code

Hello there! I'm still getting the hang of programming, especially when it comes to web development. Recently, I encountered an issue with my CSS file - whenever I link it to my HTML and run the Python code, I get an error saying that the CSS file can ...

pythoncsshttp-status-code-404

What makes the <aside> tag in HTML a sectioning content, while the <main> tag is not?

I've been delving into the HTML specifications provided by whatwg and MDN. They outline the 4 sectioning elements: article, aside, nav, and section, and mention that they establish the scope of footers and headers. Now, I have a couple of queries: ...

html

Unable to display the retrieved list data using v-for loop from axios get request

I recently started using Vue.js and decided to create a simple HTML website with Vue.js to display data from myphpadmin using axios. Everything was working smoothly until I encountered an issue where I couldn't display the JSON message on my screen. n ...

javascripthtmlvue.jsaxios

Utilize Angular to initiate the transmission of attribute values upon a click event

My question may be simple, but I've been struggling to find an answer. How can I send attributes or item property bindings of an item through a click event in the best way? For example: <item class="item" [attr.data-itemid]="item.id ...

htmlangulartypescriptevent-handling