Skip to main content
se añadieron 4916 caracteres en el cuerpo
Origen Enlace
IvanS95
  • 1.2k
  • 8
  • 12

El siguiente esta hecho a partir de columnas en Bootstrap 4 para que puedas modificar el espacio que quieres que ocupen en cada tamaño de pantalla; es necesario agregar unos cuantos estilos para que todo se comporte o se mire de la manera adecuada.

.item-container {
  min-height: 450px;
  border: 1px solid grey;
  height: 100%;
}

.item-container .body {
  flex-grow: 1;
  padding: 15px 25px;
}

.item-container .action {
  padding: 15px;
}

header {
  background-color: skyblue;
  padding: 15px;
  color: #FFF;
  font-weight: bold;
  text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row align-items-stretch">
    <div class="col-6 col-md-3">
      <div class="item-container d-flex flex-column">
        <header>Item 1</header>
        <div class="body"></div>
        <div class="action">
          <button class="btn btn-success d-block mx-auto">Solicitar</button>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="item-container d-flex flex-column">
        <header>Item 2</header>
        <div class="body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam repudiandae dolore animi? Aliquid facere similique rerum iste placeat debitis asperiores enim ipsum maxime impedit sequi illum odit quas laborum ad deserunt nobis quae
            saepe totam molestias, eius, veniam dignissimos pariatur? Veniam sunt illo, in voluptas iste tempore. Libero, error facilis! Odit itaque placeat voluptate perferendis deserunt aliquid quidem accusamus laudantium amet cumque, inventore est
            corporis excepturi. Debitis minus recusandae perferendis facilis. Ducimus eveniet iste laboriosam doloremque dolore consequatur exercitationem. Aliquam dolore sit repellat rerum!</p>
        </div>
        <div class="action">
          <button class="btn btn-success d-block mx-auto">Solicitar</button>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="item-container d-flex flex-column">
        <header>Item 3</header>
        <div class="body">
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo, nihil beatae dignissimos nesciunt quo ipsam non reiciendis eligendi. Nesciunt optio incidunt sit, fugiat voluptatum debitis quae sequi iusto! Perferendis, quia vel quaerat in praesentium
            iure nam esse impedit necessitatibus maxime error tempora optio maiores nisi, veniam magnam quo iste voluptas quis rem, minus animi eum. Alias dolorem deserunt amet a nulla. Atque dolor cumque nam voluptates molestias! Deleniti quos eum molestiae
            eos, voluptatibus earum alias iusto in itaque vero veniam quidem architecto! Sint ducimus itaque deserunt, doloribus sunt consequatur assumenda vel tenetur error placeat harum, dicta eaque! Labore, vel eos!</p>
        </div>
        <div class="action">
          <button class="btn btn-success d-block mx-auto">Solicitar</button>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="item-container d-flex flex-column">
        <header>Item 4</header>
        <div class="body">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias officia magni repellendus nobis similique dolor minima ipsa vero libero temporibus inventore, itaque recusandae optio veniam ipsam explicabo delectus officiis maxime provident impedit
            blanditiis incidunt enim atque! Porro alias quod incidunt recusandae quibusdam. Porro repellat nulla vero magni eius libero inventore distinctio esse iste quam quis, aspernatur eveniet sapiente repudiandae nihil reiciendis autem! Iusto sit
            quod sed laudantium perspiciatis dicta praesentium eaque voluptatibus, sint debitis eveniet architecto magnam ipsam, animi explicabo possimus illo libero earum maiores error corrupti adipisci aspernatur quo. Laboriosam impedit ex fuga ab ipsum
            modi nemo temporibus, eius numquam laborum exercitationem. Quae pariatur qui sit temporibus voluptatibus, iste quaerat similique optio, velit rem, doloribus non ratione! Eaque, rem!</p>
        </div>
        <div class="action">
          <button class="btn btn-success d-block mx-auto">Solicitar</button>
        </div>
      </div>
    </div>
  </div>
</div>

El siguiente esta hecho a partir de columnas en Bootstrap 4 para que puedas modificar el espacio que quieres que ocupen en cada tamaño de pantalla; es necesario agregar unos cuantos estilos para que todo se comporte o se mire de la manera adecuada.

.item-container {
  min-height: 450px;
  border: 1px solid grey;
  height: 100%;
}

.item-container .body {
  flex-grow: 1;
  padding: 15px 25px;
}

.item-container .action {
  padding: 15px;
}

header {
  background-color: skyblue;
  padding: 15px;
  color: #FFF;
  font-weight: bold;
  text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row align-items-stretch">
    <div class="col-6 col-md-3">
      <div class="item-container d-flex flex-column">
        <header>Item 1</header>
        <div class="body"></div>
        <div class="action">
          <button class="btn btn-success d-block mx-auto">Solicitar</button>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="item-container d-flex flex-column">
        <header>Item 2</header>
        <div class="body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam repudiandae dolore animi? Aliquid facere similique rerum iste placeat debitis asperiores enim ipsum maxime impedit sequi illum odit quas laborum ad deserunt nobis quae
            saepe totam molestias, eius, veniam dignissimos pariatur? Veniam sunt illo, in voluptas iste tempore. Libero, error facilis! Odit itaque placeat voluptate perferendis deserunt aliquid quidem accusamus laudantium amet cumque, inventore est
            corporis excepturi. Debitis minus recusandae perferendis facilis. Ducimus eveniet iste laboriosam doloremque dolore consequatur exercitationem. Aliquam dolore sit repellat rerum!</p>
        </div>
        <div class="action">
          <button class="btn btn-success d-block mx-auto">Solicitar</button>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="item-container d-flex flex-column">
        <header>Item 3</header>
        <div class="body">
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo, nihil beatae dignissimos nesciunt quo ipsam non reiciendis eligendi. Nesciunt optio incidunt sit, fugiat voluptatum debitis quae sequi iusto! Perferendis, quia vel quaerat in praesentium
            iure nam esse impedit necessitatibus maxime error tempora optio maiores nisi, veniam magnam quo iste voluptas quis rem, minus animi eum. Alias dolorem deserunt amet a nulla. Atque dolor cumque nam voluptates molestias! Deleniti quos eum molestiae
            eos, voluptatibus earum alias iusto in itaque vero veniam quidem architecto! Sint ducimus itaque deserunt, doloribus sunt consequatur assumenda vel tenetur error placeat harum, dicta eaque! Labore, vel eos!</p>
        </div>
        <div class="action">
          <button class="btn btn-success d-block mx-auto">Solicitar</button>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="item-container d-flex flex-column">
        <header>Item 4</header>
        <div class="body">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias officia magni repellendus nobis similique dolor minima ipsa vero libero temporibus inventore, itaque recusandae optio veniam ipsam explicabo delectus officiis maxime provident impedit
            blanditiis incidunt enim atque! Porro alias quod incidunt recusandae quibusdam. Porro repellat nulla vero magni eius libero inventore distinctio esse iste quam quis, aspernatur eveniet sapiente repudiandae nihil reiciendis autem! Iusto sit
            quod sed laudantium perspiciatis dicta praesentium eaque voluptatibus, sint debitis eveniet architecto magnam ipsam, animi explicabo possimus illo libero earum maiores error corrupti adipisci aspernatur quo. Laboriosam impedit ex fuga ab ipsum
            modi nemo temporibus, eius numquam laborum exercitationem. Quae pariatur qui sit temporibus voluptatibus, iste quaerat similique optio, velit rem, doloribus non ratione! Eaque, rem!</p>
        </div>
        <div class="action">
          <button class="btn btn-success d-block mx-auto">Solicitar</button>
        </div>
      </div>
    </div>
  </div>
</div>

se añadieron 17 caracteres en el cuerpo
Origen Enlace
IvanS95
  • 1.2k
  • 8
  • 12
* {
  box-sizing: border-box
}

.flex-container {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-height: 450px;
  width: 100%;
}

.flex-item {
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0 5px;
}

.flex-item header {
  background-color: lightblue;
  color: white;
  padding: 15px;
  text-align: center;
}

.flex-item .body {
  flex-grow: 1;
  padding: 15px 25px;15px;
}

.flex-item .action {
  padding: 15px;
  text-align: center;
}
<div class="flex-container">
  <div class="flex-item">
    <header>Item 1</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 2</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 3</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 4</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
</div>
* {
  box-sizing: border-box
}

.flex-container {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-height: 450px;
  width: 100%;
}

.flex-item {
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.flex-item header {
  background-color: lightblue;
  color: white;
  padding: 15px;
  text-align: center;
}

.flex-item .body {
  flex-grow: 1;
  padding: 15px 25px;
}

.flex-item .action {
  padding: 15px;
  text-align: center;
}
<div class="flex-container">
  <div class="flex-item">
    <header>Item 1</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 2</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 3</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 4</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
</div>
* {
  box-sizing: border-box
}

.flex-container {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-height: 450px;
  width: 100%;
}

.flex-item {
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0 5px;
}

.flex-item header {
  background-color: lightblue;
  color: white;
  padding: 15px;
  text-align: center;
}

.flex-item .body {
  flex-grow: 1;
  padding: 15px;
}

.flex-item .action {
  padding: 15px;
  text-align: center;
}
<div class="flex-container">
  <div class="flex-item">
    <header>Item 1</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 2</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 3</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 4</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
</div>
se añadieron 2761 caracteres en el cuerpo
Origen Enlace
IvanS95
  • 1.2k
  • 8
  • 12
* {
  box-sizing: border-box
}

.flex-container {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-height: 450px;
  width: 100%;
}

.flex-item {
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.flex-item header {
  background-color: lightblue;
  color: white;
  padding: 15px;
  text-align: center;
}

.flex-item .body {
  flex-grow: 1;
  padding: 15px 25px;
}

.flex-item .action {
  padding: 15px;
  text-align: center;
}
<div class="flex-container">
  <div class="flex-item">
    <header>Item 1</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 2</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 3</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 4</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
</div>
* {
  box-sizing: border-box
}

.flex-container {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-height: 450px;
  width: 100%;
}

.flex-item {
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.flex-item header {
  background-color: lightblue;
  color: white;
  padding: 15px;
  text-align: center;
}

.flex-item .body {
  flex-grow: 1;
  padding: 15px 25px;
}

.flex-item .action {
  padding: 15px;
  text-align: center;
}
<div class="flex-container">
  <div class="flex-item">
    <header>Item 1</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 2</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 3</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 4</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
</div>

El siguiente fragmento es utilizando componentes de Bootstrap unicamente; Bootstrap 4 te ofrece un componente llamdo Card Decks, que te permite agrupar tarjetas de igual altura sin importar su contenido; todas se ajustan a la mas alta.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-deck">
  <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <button class="btn btn-success d-block mx-auto">Solicitar</button>
    </div>
  </div>
  <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. This card has even longer content than the first to show that equal height action.
        This card has even longer content than the first to show that equal height action.
      </p>
    </div>
    <div class="card-footer">
      <button class="btn btn-success d-block mx-auto">Solicitar</button>
    </div>
  </div>
  <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <button class="btn btn-success d-block mx-auto">Solicitar</button>
    </div>
  </div>
  <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <button class="btn btn-success d-block mx-auto">Solicitar</button>
    </div>
  </div>
</div>

Dependiendo de tu proyecto; si no puedes utilizar Bootstrap 4, entonces tienes la primer solucion que usa Flexbox nada mas; asi puedes incluirlo en tu documento HTML sin mayores problemas. Sin embargo, si puedes cambiar a la version 4 de Bootstrap, creo que sus utilidades te pueden resultar de gran ayuda; ademas, Bootstrap 4 esta completamente hecho con base en Flexbox, por tanto todo lo que puedas aplicar a Flexbox, funciona en Bootstrap 4.

* {
  box-sizing: border-box
}

.flex-container {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-height: 450px;
  width: 100%;
}

.flex-item {
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.flex-item header {
  background-color: lightblue;
  color: white;
  padding: 15px;
  text-align: center;
}

.flex-item .body {
  flex-grow: 1;
  padding: 15px 25px;
}

.flex-item .action {
  padding: 15px;
  text-align: center;
}
<div class="flex-container">
  <div class="flex-item">
    <header>Item 1</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 2</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 3</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 4</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
</div>
* {
  box-sizing: border-box
}

.flex-container {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-height: 450px;
  width: 100%;
}

.flex-item {
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.flex-item header {
  background-color: lightblue;
  color: white;
  padding: 15px;
  text-align: center;
}

.flex-item .body {
  flex-grow: 1;
  padding: 15px 25px;
}

.flex-item .action {
  padding: 15px;
  text-align: center;
}
<div class="flex-container">
  <div class="flex-item">
    <header>Item 1</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 2</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 3</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 4</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
</div>

El siguiente fragmento es utilizando componentes de Bootstrap unicamente; Bootstrap 4 te ofrece un componente llamdo Card Decks, que te permite agrupar tarjetas de igual altura sin importar su contenido; todas se ajustan a la mas alta.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-deck">
  <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <button class="btn btn-success d-block mx-auto">Solicitar</button>
    </div>
  </div>
  <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. This card has even longer content than the first to show that equal height action.
        This card has even longer content than the first to show that equal height action.
      </p>
    </div>
    <div class="card-footer">
      <button class="btn btn-success d-block mx-auto">Solicitar</button>
    </div>
  </div>
  <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <button class="btn btn-success d-block mx-auto">Solicitar</button>
    </div>
  </div>
  <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <button class="btn btn-success d-block mx-auto">Solicitar</button>
    </div>
  </div>
</div>

Dependiendo de tu proyecto; si no puedes utilizar Bootstrap 4, entonces tienes la primer solucion que usa Flexbox nada mas; asi puedes incluirlo en tu documento HTML sin mayores problemas. Sin embargo, si puedes cambiar a la version 4 de Bootstrap, creo que sus utilidades te pueden resultar de gran ayuda; ademas, Bootstrap 4 esta completamente hecho con base en Flexbox, por tanto todo lo que puedas aplicar a Flexbox, funciona en Bootstrap 4.

se añadieron 11 caracteres en el cuerpo
Origen Enlace
IvanS95
  • 1.2k
  • 8
  • 12
Loading
Origen Enlace
IvanS95
  • 1.2k
  • 8
  • 12
Loading