html - tooltips bootstrap

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

Question

Estaba mirando uno de los ejemplos de Bootstrap que usan el card-deck y las clases de 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 estén alineados verticalmente (en la parte inferior de cada tarjeta) pero no pude encontrar una manera de hacerlo. Intenté configurar la clase .align-bottom , así como <div class="align-text-bottom"> el botón en <div class="align-text-bottom"> . También probé varias sugerencias de esta pregunta sobre agregar espacio, pero aún así no tuvo éxito (también el espacio debe ser variable de modo que llene el espacio restante de la lista).

El ajuste en <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 algún tipo de borde a su alrededor.

¿Alguien tiene alguna idea?

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

Answer 1

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>

Answer 2

Establezca el div .card-body para display:flex y flex-direction:column .

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

Me imagino que hay clases de ayuda 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>

Answer 3

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>

Answer 4

Una pregunta similar ha sido respondida aquí .

Simplemente agregue la clase align-self-end 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>

Por defecto, la card es display: flex, pero el card-body la card-body no lo es. Debido a esto, debe agregar d-flex flex-column al card-body la card-body . Esto hará que las clases de alineación de flexbox funcionen.

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.

Answer 5

actualizado basado en la adición del enlace jsfiddle

Puede usar las siguientes clases de modificador Bootstrap 4:

1. Agregue d-flex al .card-body
2. Agregue flex-column a .card-body
3. Agregue mt-auto a .btn anidado en .card-body

violín actualizado

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