title: How to set a same card Height in bootstrap 4
body: <p>I cant make my cards have the same size </p>
  
  <p>ive been working in this problem but i dont find a solucion at all... ive try it to use h-xxx, align-items-stretch and Height:100% but i cant make my cards have the same size, or the same height in this case</p>
  
  <p>this is my actual code of what im doing</p>
  
  <pre><code>  &lt;div class="content"&gt;
      &lt;div class="container-fluid" style=" height:360px"&gt;
  
        &lt;div class="row align-items-stretch "&gt;
          &lt;!-- DETALLES DEL PROYECTO --&gt;
  
          &lt;div class="card h-100 w-40 ml-3" id="detalles" *ngFor="let c of proyectof"&gt;
              &lt;div class="card-header" align="center"&gt;
                  &lt;h4 class="title"&gt;{{c.nombrep}}&lt;/h4&gt;
                &lt;/div&gt;
  
  
            &lt;div class="container "&gt;
              &lt;div class="row"&gt;
                &lt;div class="form-group col-md-6"&gt;
                  &lt;label id="letras" for="Nombre"&gt;Nombre del Proyecto&lt;/label&gt;
                  &lt;input type="text" value={{c.nombrep}} class="form-control" id="NombreP" disabled name="NombreP"
                    maxlength="40" size="20"&gt;
                &lt;/div&gt;
  
                &lt;div class="form-group col-md-6"&gt;
                  &lt;label for="ClienteP"&gt;Cliente&lt;/label&gt;
                  &lt;input type="text" value={{c.nombrecliente}} class="form-control" disabled id="ClienteP" name="ClienteP"
                    maxlength="20" size="20"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
  
                &lt;div class="form-group col-md-6"&gt;
                  &lt;label for="AdminP"&gt;Administrador del Proyecto&lt;/label&gt;
                  &lt;input type="text" value={{persona}} pattern="[A-Za-z]+" disabled class="form-control" id="AdminP"
                    name="AdminP" maxlength="40" size="20"&gt;
                &lt;/div&gt;
  
  
                &lt;div class="form-group col-md-6"&gt;
                  &lt;label for="CodigoP"&gt;Codigo&lt;/label&gt;
                  &lt;input type="text" pattern="[+#*\d*]+" value={{c.numero}} disabled maxlength="10" class="form-control"
                    id="CodigoP" name="CodigoP" maxlength="40"&gt;
                &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                &lt;div class="form-group col-md-6"&gt;
                  &lt;label for="FechaIP"&gt;Fecha de Inicio&lt;/label&gt;
                  &lt;input type="text" value="{{c.fechaini | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
                    disabled id="FechaIP"&gt;
                &lt;/div&gt;
                &lt;div class="form-group col-md-6"&gt;
                  &lt;label for="FechaCP"&gt;Fecha de Culminacion&lt;/label&gt;
                  &lt;input type="text" value="{{c.fechafin | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
                    disabled id="FechaCP"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row justify-content-center"&gt;
                &lt;div class="form-group  "&gt;
                  &lt;label&gt;Plataforma&lt;/label&gt;&lt;br /&gt;
                  &lt;select class="btn btn-outline-secondary" disabled style="border-color:rgba(165, 157, 157, 0.664)"&gt;
                    &lt;option *ngIf="c.tipo=='USSD'" value="1"&gt;USSD&lt;/option&gt;
                    &lt;option *ngIf="c.tipo=='SMS'" value="1"&gt;SMS&lt;/option&gt;
                  &lt;/select&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- CASOS DE PRUEBA --&gt;
  
  
          &lt;div class="card h-100 ml-3 d-flex " id="card"&gt;
            &lt;div class="card-header" align="center"&gt;
              &lt;p class="text-muted"&gt;Casos de Pruebas Creados&lt;/p&gt;
            &lt;/div&gt;
            &lt;!-- &lt;div class="header" align="center" style="padding-top:15px"&gt;
              &lt;p class="text-muted"&gt;Casos de Pruebas Creados&lt;/p&gt;
            &lt;/div&gt; --&gt;
  
            &lt;div id="tabla" class="table-responsive text-nowrap" style="overflow:auto;"&gt;
  
              &lt;table class="table table-hover"&gt;
  
                &lt;thead class="text-black-50"&gt;
                  &lt;tr id="personalizacion"&gt;
                    &lt;th&gt;
                      &lt;div class="checkbox custom-control custom-checkbox"&gt;
                        &lt;mat-checkbox color="primary" id="uno" [checked]="checkBoxMayor" type="checkbox"
                          (change)="checkAll()"&gt;&lt;/mat-checkbox&gt;
                        &lt;label for="checkbox1"&gt;&lt;/label&gt;
                      &lt;/div&gt;
                    &lt;/th&gt;
  
                    &lt;th scope="col"&gt;Nombre del Caso&lt;/th&gt;
                    &lt;th scope="col"&gt;Estatus&lt;/th&gt;
                    &lt;th scope="col"&gt;Herramientas&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
  
                &lt;tbody *ngFor="let a of casosdeprueba; let b = index"&gt;
                  &lt;tr&gt;
                    &lt;td&gt;
                      &lt;div class="checkbox"&gt;
                        &lt;mat-checkbox color="primary" #box id='{{a.idcdp}}/{{a.nombrecdp}}' [checked]="check"
                          type="checkbox" (change)="cambiarCheckbox($event, box.id)"&gt;&lt;/mat-checkbox&gt;
                        &lt;label for={{a.idcdp}}&gt;&lt;/label&gt;
                      &lt;/div&gt;
                    &lt;/td&gt;
  
                    &lt;!-- Esto es lo que estaba dentro del tb del nombre del caso prueba 
                      display:block;text-overflow: ellipsis;width: 150px;overflow: hidden; 
                      y fue removido dejando solo esto
                      white-space: nowrap;
                     --&gt;
                    &lt;td style="white-space: nowrap" mat-raised-button matTooltip={{a.nombrecdp}}&gt;{{a.nombrecdp}}&lt;/td&gt;
                    &lt;td mat-raised-button matTooltip="Sin Ejecutar" *ngIf="a.idestado === 2 &amp;&amp; a.proceso!='ejecutando'"&gt;
                      &lt;button class="tune" type="submit"&gt;&lt;i class="fa fa-circle pointer" style="color:yellow"&gt;&lt;/i&gt;&lt;/button&gt;
                    &lt;/td&gt;
                    &lt;td mat-raised-button matTooltip="Exitoso, presione para conocer mas detalles"
                      *ngIf="a.idestado === 0 &amp;&amp; a.proceso!='ejecutando'"&gt; &lt;button class="tune"
                        [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit"&gt;&lt;i
                          class="fa fa-circle text-success pointer"&gt;&lt;/i&gt;&lt;/button&gt;
                    &lt;/td&gt;
                    &lt;td mat-raised-button matTooltip="Fallido, presione para conocer mas detalles"
                      *ngIf="a.idestado === 1 &amp;&amp; a.proceso!='ejecutando'"&gt;&lt;button class="tune"
                        [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit"&gt;&lt;i
                          class="fa fa-circle text-danger pointer"&gt;&lt;/i&gt;&lt;/button&gt;
                    &lt;/td&gt;
                    &lt;td *ngIf="a.proceso === 'ejecutando'"&gt;
                      &lt;div class="loader" id="loader"&gt;Loading...&lt;/div&gt;
                    &lt;/td&gt;
  
                    &lt;td&gt;
  
                      &lt;div class="btn-group btn-group-justified "&gt;
                        &lt;!--  &lt;button  [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit" class="btn btn-primary"&gt;Estado&lt;/button&gt; --&gt;
  
                        &lt;button class="tune" [routerLink]="['/Gestion/Historial_del_caso', id, a.idcdp]" type="submit"&gt;&lt;i
                            class="icon" mat-raised-button matTooltip="Histórico" class="material-icons pointer"&gt;
                            description
                          &lt;/i&gt;&lt;/button&gt;
  
                        &lt;button class="tune" [routerLink]="['/Gestion/Detalles_del_caso', id, a.idcdp]" type="submit"&gt;&lt;i
                            mat-raised-button matTooltip="Descripción" class="material-icons pointer"&gt;
                            remove_red_eye
                          &lt;/i&gt;&lt;/button&gt;
  
                      &lt;/div&gt;
                      &lt;div class="btn-group btn-group-justified "&gt;
  
                        &lt;button class="tune" [routerLink]="['/Gestion/Modificando', id, a.idcdp]" type="submit"&gt;&lt;i
                            mat-raised-button matTooltip="Editar caso de prueba" class="material-icons pointer"&gt;
                            create
                          &lt;/i&gt;&lt;/button&gt;
                        &lt;button class="tune" [routerLink]="['/Gestion/Copiando', id, a.idcdp]" type="submit"&gt;&lt;i
                            mat-raised-button matTooltip="Copiar caso de prueba" class="material-icons pointer"&gt;
                            file_copy
                          &lt;/i&gt;&lt;/button&gt;
                        &lt;button class="tune" (click)="borrarcdp(a.idcdp)" type="submit"&gt;&lt;i mat-raised-button
                            matTooltip="Eliminar Caso de Prueba" class="material-icons pointer"&gt;
                            delete
                          &lt;/i&gt;&lt;/button&gt;
  
                      &lt;/div&gt;
  
  
  
                    &lt;/td&gt;
  
                  &lt;/tr&gt;
                &lt;/tbody&gt;
  
              &lt;/table&gt;
  
            &lt;/div&gt;
            &lt;div class="card-footer text-muted text-center"&gt;
              &lt;div class="btn-group btn-group-justified "&gt;
                &lt;!--  &lt;button  [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit" class="btn btn-primary"&gt;Estado&lt;/button&gt; --&gt;
  
                &lt;button *ngIf="show4" class="tune" type="submit" (click)="iniEjecucion()"&gt;&lt;i class="icon" mat-raised-button
                    matTooltip="Ejecutar Casos de Prueba" class="material-icons pointer"&gt;
                    directions_run
                  &lt;/i&gt;&lt;/button&gt;
                &lt;button *ngIf="!show4" class="tune" type="submit" disabled&gt;&lt;i class="icon" mat-raised-button
                    matTooltip="Ejecutar Casos de Prueba" class="material-icons pointer"&gt;
                    directions_run
                  &lt;/i&gt;&lt;/button&gt;
  
                &lt;button *ngIf="show4" class="tune" type="submit" data-toggle="modal" data-target="#datos"&gt;
                  &lt;i mat-raised-button matTooltip="Agendar Ejecucion de Proyectos"
                    class="material-icons pointer"&gt;
                    alarm
                  &lt;/i&gt;&lt;/button&gt;
                &lt;button *ngIf="!show4" class="tune" disabled type="submit"&gt;&lt;i mat-raised-button
                    matTooltip="Agendar Ejecucion de Proyectos" class="material-icons pointer"&gt;
                    alarm
                  &lt;/i&gt;&lt;/button&gt;
  
                &lt;button class="tune" [routerLink]="['/Gestion/Creando_caso_de_prueba', id ]" type="submit"&gt;&lt;i
                    mat-raised-button matTooltip="Crear un nuevo Caso de Prueba" class="material-icons pointer"&gt;
                    add_circle
                  &lt;/i&gt;&lt;/button&gt;
                  &lt;button type="button" class="btn btn-success" data-toggle="modal" data-target="#datos"&gt;Agendar
                    &lt;/button&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>this is what i get with the code that i attached</p>
  
  <p><a href="https://i.stack.imgur.com/VKRvB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VKRvB.png" alt="enter image description here"></a>
  but i need my two cards with the same height , the problem itsef comes when i add more items to my table, because its start to grow, and overpass the height of the left card, if a set a static heigth, the card losses his responsive feature</p>