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

81

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.

Problema de alineación

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.

html css twitter-bootstrap bootstrap-4 un invitado
fuente
2
Siempre puede colocarlo como absolute, bottom:0, margin:0 auto, con su conjunto principal comoposition: relative
Ferran Buireu
@Paulie_D Intenté configurar, style="margin-top: auto;"sin embargo, eso no cambia la situación. El botón se encuentra exactamente donde estaba antes. Mira este violín .
a_guest

Respuestas:

162

Puede usar las siguientes clases de modificadores de Bootstrap 4:

  1. Agregar d-flexa.card-body
  2. Agregar flex-columna.card-body
  3. 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.

Sol
fuente
2
Tuve que configurar "h-100" para 100% de altura también en .card-body para que funcionara, pero ¿quizás fue mi culpa? ¡Gracias por la buena respuesta!
Rustyjim
20

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.

Zim
fuente
parece que en 4.4.1 la tarjeta no es flexible, necesitaba agregar .d-flex a la .card para que funcione
Pablo Pazos
6

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

Paulie_D
fuente
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>
Peter Palmer
fuente
2

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/

RustyNox
fuente
0

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

DreamTeK
fuente