web-dev-qa-db-fra.com

Bootstrap 4 cartes / panneaux avec une image à gauche de l'en-tête et du titre

Je pensais que ce que j'essayais de faire serait assez facile à faire mais je ne peux simplement pas le faire fonctionner.

J'ai essayé de tirer à gauche sur bootstrap cartes et panneaux et ça ne marche pas comme je le veux ...

Voici une photo de ce que je voudrais réaliser

Exemple

Heres code qui fonctionne presque

<div class="card text-center" *ngFor="let event of eventActivities">
    <div class="card-header pull-left">
        <img src="..." alt="">

        Title </div>
    <div class="card-block">
        <h4 class="card-title">Title</h4>
        <p class="card-text">Description</p>
        <a href="#" class="btn btn-primary">BUTTON</a>
    </div>
    <div class="card-footer text-muted">
        FOOTER
    </div>
</div>
csstwitter-bootstrapbootstrap-4
15
RealmSpy

Vous pouvez le faire de différentes manières. Voici un moyen d'utiliser le flex-row et flex-wrap classes d’utilitaires pour modifier la disposition des éléments dans la carte ...

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

   <div class="card flex-row flex-wrap">
        <div class="card-header border-0">
            <img src="//placehold.it/200" alt="">
        </div>
        <div class="card-block px-2">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Description</p>
            <a href="#" class="btn btn-primary">BUTTON</a>
        </div>
        <div class="w-100"></div>
        <div class="card-footer w-100 text-muted">
            FOOTER
        </div>
    </div>

Voici une autre approche utilisant la grille ...

  <div class="card">
        <div class="row no-gutters">
            <div class="col-auto">
                <img src="//placehold.it/200" class="img-fluid" alt="">
            </div>
            <div class="col">
                <div class="card-block px-2">
                    <h4 class="card-title">Title</h4>
                    <p class="card-text">Description</p>
                    <a href="#" class="btn btn-primary">BUTTON</a>
                </div>
            </div>
        </div>
        <div class="card-footer w-100 text-muted">
            Footer stating cats are CUTE little animals
        </div>
  </div>

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

Je ne sais pas pourquoi tu as text-center comme rien n'a été centré dans l'exemple d'image souhaité.

30
Zim