Créer une Card avec Bootstrap 4

Aujourd’hui nous allons apprendre à créer une Card avec Bootstrap 4. Ce composant est totalement nouveau. Auparavant, les utilisateurs du framework développaient ce genre d’élément via l’utilisation des panels. Avec cet ajustement, Bootstrap offre une excellente alternative.

Vous l’avez compris, nous allons découvrir pas à pas les nouveautés de Bootstrap 4. Dans ce tutoriel, nous irons plus loins avec la customisation CSS d’un élément Card en y important une image, modifiant son look ou ses interactions sous l’état :hover.

La Structure de base

La composition d’une Card est assez simple. Une balise de classe .card englobe l’intégralité de la structure.

Dans une balise parente de classe .card-block, on retrouve un titre et un paragraphe composés respectivement des classes .card-title et .card-text. Rien de très compliqué, Bootstrap fait dans le bon sens (comme d’habitude !).

<div class="card"><img class="card-img-top" alt="Card image cap" data-src="holder.js/100%x180/">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary" href="#">Button</a>

</div>
</div>

Créer et customiser une Card

Première étape : la structure HTML

Dans une div de classe .container, nous allons dans un premier temps définir la largeur de notre Card. Dans une nouvelle div nous ajoutons au même niveau la classe .block ainsi que la classe CSS de la Grid Bootstrap .col-xs-6.

<div class="container"></div>

À l’intérieur de la Card, nous allons retrouver deux emplacements distincts : la div de classe .img-card permettant d’ajouter l’image de la chaussure et la div de classe .img-card-overlay qui comprendra l’intégralité du texte afficher sur la Card.

Tout comme la structure de base nous le propose, nous utiliserons une balise <h4> et une balise <p> pour notre texte.

<div class="container">
<div class="block col-xs-6">
<div class="card"><img class="card-img img-responsive" src="http://images.nike.com/is/image/emea/PDP_HERO/Nike-Roshe-Run-Print-Womens-Shoe-599432_674_A_PREM.jpg" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">Nike Roshe One Print</h4>
<p class="card-text"><small class="text-muted"> Chaussure pour femme</small></p>

</div>
</div>
</div>
</div>

Enfin, j’ai réalisé cette Card comme une carte e-commerce proposant à l’acheteur d’ajouter rapidement au panier le produit avec le bouton centré en bas de la carte. Cependant, comme vous pouvez le voir dans la structure HTML ci-contre, la div de classe .card-footer se trouve à l’extérieur de la div .card. La faute à l’overlay utilisé (qui génère certainement un z-index, je n’ai pas regardé en profondeur le problème).

Voilà pourquoi nous utilisons une classe .block qui ne se trouve pas dans le CSS de Bootstrap. Cette dernière sera stylisé pour nous aider à harmoniser le rendu de la carte.

<div class="container">
<div class="block col-xs-6">
<div class="card"><img class="card-img img-responsive" src="http://images.nike.com/is/image/emea/PDP_HERO/Nike-Roshe-Run-Print-Womens-Shoe-599432_674_A_PREM.jpg" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">Nike Roshe One Print</h4>
<p class="card-text"><small class="text-muted"> Chaussure pour femme</small></p>

</div>
</div>
<div class="card-footer text-center"><a class="btn btn-primary-outline" href="#">Ajouter au panier</a></div>
</div>
</div>

Seconde étape : le CSS

Après avoir intégré la structure HTML, il ne nous reste plus qu’à styliser notre Card pour un rendu optimal. Il y a autant de façons de le faire que de personnes sur cette terre. J’ai choisis un style sobre et flat design suivant les tendances actuelles.

.card {
border: none;
border-radius: 0;
background-color: #f5f5f5;
margin:0;
}
.card-title {margin: 0;}
.card img {
position: relative;
display:block;
transition: all .2s ease-in-out;
}
.block:hover img {
transition: all .2s ease-in-out;
transform: scale(.95); /* CSS3 */
-moz-transform: scale(.95); /* Firefox */
-webkit-transform: scale(.95); /* Webkit */
-o-transform: scale(.95); /* Opera */
-ms-transform: scale(.95); /* IE 9 */
}
.card-footer {
padding: 0 1.25rem 1.25rem;
background-color: #f5f5f5;
border: none;
}
.card-footer {background-color: #f5f5f5;}
.btn-primary-outline {border-width:2px;}

Par défaut, Bootstrap propose un style CSS propre au framework.
Ces modifications apportent une réelle plus value à votre travail puisqu’elles vous donne l’opportunité de vous démarquer tout en utilisant que très peu de code. Bootstrap 4 apporte d’autan plus de confort et j’en suis sur vous séduira en un clin d’oeil.