This question doesn't ask how to make the columns the same height, but how to make the contents fill the height of the columns.
I have a row with two cards. While the columns are the same height, the cards are not.
+---------------------------+---------------------------+
| +-----------------------+ | +-----------------------+ |
| | | | | | |
| | | | | | |
| | | | | | |
| +-----------------------+ | | | |
| | | | |
| | | | |
| | | | |
| | +-----------------------+ |
+---------------------------+---------------------------+
I have added the class .h-100 to the first card, but that makes that card lose its bottom margin, so it doesn't line up with the other one. If I add h-100 to both, the cards are the same heights, but I lose the bottom margin on both. Is there a correct way to have the cards full height in each column?
https://jsfiddle.net/yjfzvpoh/1/
Please see this 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/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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> jstuardo@desytec.com</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 class="card">
<div class="card-header">
<h3 class="card-title">Cambio de contraseña</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>Nombre de usuario
</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>Contraseña actual
</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="La Contraseña debe tener al menos 6 caracteres." 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">
Ingrese la contraseña actual.
</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>Nueva contraseña
</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">
Ingrese la nueva contraseña.
</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>Confirmación de contraseña
</h6>
</div>
<div class="col-auto">
<div class="input-group">
<input autocomplete="new-password" class="form-control" data-val="true" data-val-equalto="La contraseña y su confirmación no coinciden." 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">
Confirmación incorrecta.
</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="btnCambiar"><i class="fa fa-key me-2"></i>Cambiar contraseña</button></span>
</div>
</div>
</div>
</div>
</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>How to set the left div to be the same height of the right div? I need, in fact, both div has the same inner height of the div whose class is row
