Bootstrap: alinea el botón con la parte inferior de la tarjeta

Question 1

Estaba mirando uno de los ejemplos de Bootstrap que usan las clases card-decky card( ejemplo de precios ). Me preguntaba cómo se puede arreglar la alineación de los botones si una de las listas tiene menos elementos que las demás.

Me gustaría que todos los botones estuvieran alineados verticalmente (en la parte inferior de cada tarjeta) pero no pude encontrar la manera de hacerlo. Intenté configurar la .align-bottomclase y ajustar el botón <div class="align-text-bottom">. También probé varias sugerencias de esta pregunta sobre cómo agregar espacio, sin embargo, todavía no tuve éxito (también el espaciado debe ser variable de modo que llene el espacio restante de la lista).

El envolver <div class="card-footer bg-white">tampoco produjo el resultado deseado, ya que no alinea el botón en la parte inferior de la tarjeta y crea una especie de borde a su alrededor.

¿Alguien tiene alguna idea?

Editar: Aquí hay un jsfiddle que se parece al problema.

Question 2

Puede usar las siguientes clases de modificadores de Bootstrap 4:

Agregar d-flexa.card-body
Agregar flex-columna.card-body
Agregar mt-autoa .btnanidado en.card-body

violín

Consulte esta página para obtener una lista completa de las clases de modificación de flexbox para Bootstrap 4.

Question 3

Aquí se ha respondido una pregunta similar .

Simplemente agregue la align-self-endclase al elemento para alinear en la parte inferior.

https://www.codeply.com/go/Fiorqv1Iz6

     <div class="card-body d-flex flex-column">
            <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
            <ul class="list-unstyled mt-3 mb-4">
              <li>20 users included</li>
              <li>10 GB of storage</li>
            </ul>
            <button type="button" class="align-self-end btn btn-lg btn-block btn-primary" style="margin-top: auto;">Get started</button>
     </div>

De forma predeterminada, cardis display: flex, pero card-bodyno is. Debido a esto, debe agregar d-flex flex-columnal archivo card-body. Esto hará que funcionen las clases de alineación de flexbox.

Otra opción es usar mt-auto(margen superior automático) en el botón que lo empujará hacia la parte inferior de la tarjeta.

Question 4

Establezca el .card-bodydiv en display:flexy flex-direction:column.

Luego dale al botón margin-top:auto.

Imagino que hay clases de ayuda de Bootstrap para esto.

.card-body {
  display: flex;
  flex-direction: column;
}

button.btn {
  margin-top: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Free</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
      </div>
    </div>

    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Enterprise</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>30 users included</li>
          <li>15 GB of storage</li>
          <li>Phone and email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
      </div>
    </div>
  </div>

Expandir fragmento

Question 5

Tienes que agregar:

<div class="card-footer">
<button type="button" class="btn btn-primary btn-sm btn-block" onclick="location.href = '';">BUY NOW </button>
</div>

Question 6

Usa el pie de página, ya tiene todo configurado para ti.

<div class="card-deck">
<div class="card">
   <div class="card-body">
      <h4 class="card-title">Title goes here</h4>
      <p class="card-text">Ut leo enim, fermentum fermentum tempor sit amet, vehicula in felis. Pellentesque a arcu augue. Nam eu malesuada lorem. Curabitur et molestie lacus.</p>
   </div>
   <div class="card-footer text-muted mx-auto">
      <button type="button" class="btn btn-sm btn-outline-secondary">Click me!</button>
   </div>
</div>

Luego, opcionalmente, puede diseñar el elemento de pie de página.

.card-footer {
  background: transparent;
  border-top: 0px;
}

demostración: https://jsfiddle.net/rustynox/203zwyq6/

Question 7

Flex es tu amigo

Algo como esto funcionará la magia:

.flex-wrap {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: inherit;
  -ms-flex-align: inherit;
  align-items: inherit;
}

.flex-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #eee;
  border: 1px solid #ccc;
  margin: 10px;
  padding: 10px;
}


.flex-item {
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}


.fill{
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.btn{
  background:#069;
  padding:10px;
  color:#fff;
}

<div class="flex-wrap">

  <div class="flex-container">
    <div class="flex-item">FREE</div>
    <div class="flex-item fill">
      <h2>$0</h2>
      <p>Some text ... ashd iaush diuhasd uhasd aiusdh iaush d haisduhaiusdh iaush d haisduh aisuhd ias u</p>
    </div>
    <div class="flex-item">
      <a href="#" class="btn">SIGN UP</a>
    </div>
  </div>

  <div class="flex-container">
    <div class="flex-item">PRO</div>
    <div class="flex-item fill">
      <h2>$10</h2>
      <p>Some text ... ashd iaush uhasd aiusdh iaush d haisduhdiuhasd aiusdh iuhasd aiusdh iaush d haisduhaush d haisduh aisuhd ias u</p>
    </div>
    <div class="flex-item">
      <a href="#" class="btn">GET STARTED</a>
    </div>
  </div>

  <div class="flex-container">
    <div class="flex-item">ENTERPRISE</div>
    <div class="flex-item fill">
      <h2>$20</h2>
      <p>Some text ... ashd iaush diuhasd aiusdh iaush d haisduh aisuhd ias u</p>
    </div>
    <div class="flex-item">
      <a href="#" class="btn">CONTACT</a>
    </div>
  </div>
  
</div>

Expandir fragmento