Same height with two columns and three card ui elements

Question

I'm using Bootstrap 4. My grid is 1 row within 2 columns and 3 cards elements as the image shows. I don’t know how to remaining the blank space of the blue card UI up to the same line where the yellow card UI finishes.

I want them to have the same height. I’ve read this but without success and I’ve tried the following code:

<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">Mi título</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">Mi título</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">Mi titulo</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>
  </div>
</div>

score 2 · Accepted Answer · answered Jul 26 '21 at 15:20

Add h-100 to the card you want to have the whole height.

Just 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">Mi título</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">Mi título</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">Mi titulo</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>

Same height with two columns and three card ui elements

1 Answers1