Comment aligner les boutons au bas des cartes Bootstrap ?

Alignement des boutons au bas des cartes Bootstrap

Comme vous l'avez observé, l'alignement des boutons dans les cartes Bootstrap peut devenir problématique lorsque leur le contenu varie en longueur. Pour aligner efficacement les boutons au bas de chaque carte :

1. Implémentez Flexbox : Ajoutez la classe d-flex à l'élément .card-body pour activer la disposition flexbox.
2. Ajouter un alignement de colonne : Utilisez la classe flex-column sur .card-body pour aligner verticalement le contenu de la carte.
3. Utilisez Margin Auto pour aligner les boutons : Ajoutez la classe mt-auto aux éléments .btn imbriqués dans .card-body. Cela aligne automatiquement les boutons au bas du corps de la carte, remplissant verticalement l'espace restant.

Reportez-vous à l'extrait de code suivant pour un exemple :

<div class="card">
  <div class="card-body d-flex flex-column">
    <p>Card Content</p>
    <button type="button" class="btn btn-primary mt-auto">Button</button>
  </div>
</div>

En implémentant En suivant ces étapes, vous pouvez vous assurer que tous les boutons de vos cartes Bootstrap sont systématiquement alignés sur leurs bas respectifs, quelles que soient les variations de contenu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!