Bootstrap - aligner le bouton au bas de la carte

Question

J'ai jeté un coup d'œil à l'un des exemples de Bootstrap qui utilise la fonction card-deck et card classes ( Exemple de tarification ). Je me suis demandé comment on peut corriger l'alignement des boutons si l'une des listes a moins d'éléments que les autres.

J'aimerais que tous les boutons soient alignés verticalement (au bas de chaque carte), mais je n'ai pas trouvé le moyen de le faire. J'ai essayé de définir le paramètre .align-bottom ainsi que l'intégration du bouton dans la classe <div class="align-text-bottom"> . J'ai également essayé plusieurs suggestions de cette question sur l'ajout d'espace mais toujours pas de succès (l'espacement devrait également être variable de manière à remplir l'espace restant de la liste).

Emballage dans <div class="card-footer bg-white"> n'a pas non plus donné le résultat escompté car il n'aligne pas le bouton en bas de la carte et crée une sorte de bordure autour de lui.

Quelqu'un a une idée ?

Edit : Voici un jsfiddle qui ressemble au problème.

Answer 1

mis à jour suite à l'ajout du lien jsfiddle

Vous pouvez utiliser les classes de modification Bootstrap 4 suivantes :

1. Ajouter d-flex à .card-body
2. Ajouter flex-column à .card-body
3. Ajouter mt-auto à .btn imbriqué dans .card-body

mise à jour du violon

Se référer à cette page pour une liste complète des classes de modification de la flexbox pour Bootstrap 4.

Answer 2

Une question similaire a été répondu ici .

Il suffit d'ajouter le align-self-end classe à l'élément à aligner en bas.

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>

Par défaut, le card est display:flex, mais le card-body ne l'est pas. Pour cette raison, vous devez ajouter d-flex flex-column à la card-body . Cela permettra de faire fonctionner les classes d'alignement flexbox.

Une autre option consiste à utiliser mt-auto (marge supérieure automatique) sur le bouton qui le poussera au bas de la carte.

Answer 3

Définissez le .card-body div à display:flex et flex-direction:column .

Ensuite, donnez le bouton margin-top:auto .

J'imagine qu'il existe des classes d'aide Bootstrap pour cela.

.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 4

Vous devez ajouter :

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

Answer 5

Le Flex est votre ami

Quelque chose comme ça fera fonctionner la magie :

.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>