Nous utiliserons des éléments Bootstrap 4 tels que Flexbox
, le composant card
ou encore le bouton toggle
.
Découvrez ci-dessous le résultat final :
Création de la structure
Notre conteneur principal utilisera la classe .container-fluid
et intégrera respectivement les div .row
et 2 div .col-6
(dans cet exemple, nous utilisons 2 produits par ligne).
<div class="container-fluid"> <div class="row"> <div class="col-6"></div> <div class="col-6"></div> </div><!-- /row --> </div><!-- /container -->
Une fois la structure réalisée, il est bon de penser au responsive design et à l’adaptation mobile de notre grille. Pour ce faire, nous allons définir notre grille sur 2 colonnes jusqu’à l’affichage small
. Lorsque l’écran passe sur un rendu extra-small
, une seule colonne sera utilisée.
<div class="container-fluid"> <div class="row my-3"> <div class="col-12 col-sm-6 my-3 my-sm-0"></div> <div class="col-12 col-sm-6 my-3 my-sm-0"></div> </div><!-- /row --> </div><!-- /container -->
my-3
sur les écrans inférieurs à une résolution small
pour les éléments .row
et colonnes. La classe my-sm-0
supprime cette marge lorsque l’écran possède une résolution d’affichage supérieur à small
.Intégration du composant card
L’élément .card
est composé d’une image, d’un conteneur .card-body
intégrant respectivement un titre et un paragraphe.
Le titre utilise un <h5>
et intègre une balise utilise un <small>
. Le paragraphe quant à lui sert à mettre en forme le prix du produit. Dans cet exemple, le produit bénéficie d’une promotion et nous utilisons respectivement la classe .text-danger
sur le nouveau prix et une div <del>
pour barrer l’ancien prix.
<div class="container-fluid"> <div class="row my-3"> <div class="col-12 col-sm-6 my-3 my-sm-0"> <div class="card"> <img src="https://images.asos-media.com/products/nike-air-max-90-baskets-en-cuir-bleu-302519-400/9536548-1-blue?$n_640w$&wid=634&fit=constrain" class="card-img-top" alt="Nike - Air Max 90"> <div class="card-body"> <h5 class="card-title"><small>Nike - Air Max 90 - Baskets en cuir - Bleu 302519-400</small></h5> <p class="card-text"><strong class="text-danger">111,49 €</strong> <del>139,99 €</del></p> </div><!-- /card-body --> </div><!-- /card--> </div><!-- /col --> </div><!-- /row --> </div><!-- /container -->
Intégration du bouton like
Cette intégration nécessite dans un premier temps la mise en place d’une div .card-img-overlay
. Cela va nous permettre de positionner le bouton « like » par dessus notre card. Le bouton « like » sera matérialisé par un bouton de type toggle qui permet de rester cliqué lorsque l’utilisateur l’active avec le paramètre HTML5 aria-pressed
.
<div class="card"> <img src="https://images.asos-media.com/products/nike-air-max-90-baskets-en-cuir-bleu-302519-400/9536548-1-blue?$n_640w$&wid=634&fit=constrain" class="card-img-top" alt="Nike - Air Max 90"> <div class="card-img-overlay"> <button type="button" class="btn btn-light rounded-circle" data-toggle="button" aria-pressed="false" autocomplete="off"> <i class="far fa-heart"></i> </button> </div><!-- /card-img-overlay --> <div class="card-body"> <h5 class="card-title"><small>Nike - Air Max 90 - Baskets en cuir - Bleu 302519-400</small></h5> <p class="card-text"><strong class="text-danger">111,49 €</strong> <del>139,99 €</del></p> </div><!-- /card-body --> </div><!-- /card-->

Acheter et vendre des cryptomonnaies
Coinbase est l’endroit idéal pour acheter, vendre et gérer votre portefeuille de cryptomonnaies. Coinbase est la plateforme numéro 1 dans le monde avec plus de 20 millions d’utilisateurs.
Acheter sur CoinbaseAjuster le positionnement avec Flexbox
Après avoir intégré la fonction d’overlay sur notre card, nous devons le positionner au bon endroit : en bas à droite de l’image produit.
Pour ce faire, nous utiliserons les alignements flexbox
.
<div class="card-img-overlay d-flex justify-content-end align-items-end"> <button type="button" class="btn btn-light rounded-circle" data-toggle="button" aria-pressed="false" autocomplete="off"> <i class="far fa-heart"></i> </button> </div><!-- /card-img-overlay -->
la classe .d-flex
permet d’appliquer un display: flex;
à notre conteneur.
Les casses .justify-content-end
et .align-items-end
permettent respectivement de positionner le bouton « like » à la fin du contenu vertical (en bas) et horizontal (à droite).
Astuce de positionnement
Après cette manipulation flexbox
, on s’aperçoit que le contenu se positionne tout en bas de la card produit et non sur l’image. Ce problème est lié à notre classe .card-img-overlay
qui englobe l’intégralité de la card.
Pour remédier à ce problème, il nous suffit d’englober la div image ainsi que la div .card-img-overlay
dans un conteneur utilisant la classe .position-relative
. Cela permettra d’appliquer la fonction d’overlay uniquement à l’image de notre card produit.
<div class="position-relative"> <img src="https://images.asos-media.com/products/nike-air-max-90-baskets-en-cuir-bleu-302519-400/9536548-1-blue?$n_640w$&wid=634&fit=constrain" class="card-img-top" alt="Nike - Air Max 90"> <div class="card-img-overlay d-flex justify-content-end align-items-end"> <button type="button" class="btn btn-light rounded-circle" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="far fa-heart"></i></button> </div> </div>
Un peu de couleurs
Bien entendu, pour coller le plus possible au « look » du site Asos, nous devons appliquer quelques corrections CSS.
.card {border: 0;}
.card-body {padding: .5rem 0; font-size: 14px;}
.card-title small {font-size: 14px; font-weight: 200;}
.card-text del {font-weight: 200;}
.card-img-overlay button i {font-weight: normal;}
.btn { padding: .75rem; line-height: 1;}
.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active,
.show>.btn-light.dropdown-toggle {
background-color: black;
color: white;
}
Résultat final

Développez vos compétences digitales
Apprenez Bootstrap aux côtés d’experts et artistes passionnés sur tuto.com, une plateforme de formation au digital.
Visiter Tuto.com