Scribd
Importer
4 vues6 pages

Cours Bootstrap Partie Carte

Le composant carte de Bootstrap est un conteneur flexible qui peut être divisé en trois sections : en-tête, corps et pied, en utilisant les classes appropriées. Des classes supplémentaires permettent de formater les titres, sous-titres et textes, ainsi que d'intégrer des images et des liens. Pour disposer plusieurs cartes, la classe .card-group est utilisée pour les aligner ensemble.

Transféré par

habiba balti
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
4 vues6 pages

Cours Bootstrap Partie Carte

Le composant carte de Bootstrap est un conteneur flexible qui peut être divisé en trois sections : en-tête, corps et pied, en utilisant les classes appropriées. Des classes supplémentaires permettent de formater les titres, sous-titres et textes, ainsi que d'intégrer des images et des liens. Pour disposer plusieurs cartes, la classe .card-group est utilisée pour les aligner ensemble.

Transféré par

habiba balti
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Cartes ou Cards Bootstrap

1
2
• Le composant carte ou « card » de Bootstrap est un conteneur flexible et extensible.
• Le composant carte peut être composée d’un en-tête, d’un corps et d’un pied.
• Pour définir une carte, on ajoute la classe .card à un élément conteneur (exemple div).
• Pour découper une carte en trois parties distinctes, on utilise les classes suivantes:
➢.card-header pour définir un en-tête,
➢.card-body pour définir un corps,
➢.card-footer pour définir un pied.

<div class="card">
<div class="card-header">
Entête
</div>
<div class="card-body">
Corps: Lorem ipsum
</div>
<div class="card-footer">
Pied
</div>
</div>

3
• La classe .card-title permet de mettre en forme un titre.
• La classe .card-subtitle de définir un sous titre.
• la classe .card-text permet de mettre en forme les autres textes.

<div class="card" style="width: 20rem;">


<div class="card-header">
The My Card
</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<h6 class="card-subtitle text-muted">Card subtitle</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Illo, quas.</p>
<a class="btn btn-outline-primary" href="#">Read More</a>
</div>
</div>

4
• Pour utiliser un élément de lien, on utilise la classe .card-link.

• Pour intégrer une image dans une carte, on choisit entre les classes suivantes :

➢ .card-img, .card-img-top, .card-img-bottom.

<div class="card w-50">


<div class="card-body text-center">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Illo, quas.</p>
<a class="card-link" href="#">Read More</a>
</div>
<img class="card-img-bottom" src="[Link]" alt="voyage">
</div>

5
• La classe .card-img permet d’ajouter une image qui va être ensuite utilisée comme overlay, c’est-
à-dire en fond pour une certaine partie de la carte à laquelle on doit ajouter la classe .card-img-
overlay.

• Pour gérer la disposition de plusieurs cartes, on utilise :


• la classe .card-group qui permet de coller les cartes les unes aux autres.

Vous aimerez peut-être aussi