Création site Web 100% Gratuit

Chez nous, vous ne payez que nos abonnements de maintenance, la création de votre site est offerte.
*Offre valable jusqu’à fin novembre 2022

Comment créer des cartes en CSS Bootstrap [+ exemples de code].

Août 9, 2022

article de blog

Les bases de Bootstrap Card

Dans sa forme la plus simple, une carte Bootstrap est une classe .card avec la classe .card-body imbriquée à l’intérieur. Cela crée une carte avec une bordure arrondie à l’intérieur de laquelle vous pouvez placer du texte, des images, des liens et d’autres éléments Bootstrap.
Voir le stylo Bootstrap Card : Basic 1 par Christina Perricone ( @hubspot ) sur CodePen .

Les cartes étant des divs, elles s’étendent par défaut sur toute la largeur de la page. Pour définir une largeur, vous pouvez appliquer une CSS à vos cartes ou les placer dans une grille, comme nous le verrons plus tard. Nous vous recommandons également d’ajouter des marges à vos cartes, ce que nous ferons dans les prochains exemples.
Comme les autres classes Bootstrap, la classe .card est conviviale, simple et personnalisable. Voici à quoi pourrait ressembler une carte plus étoffée :
Carte Bootstrap : Basic 2 .

Nous allons apprendre à ajouter chacun de ces composants (et plus encore) ci-dessous.

Titres et textes des cartes Bootstrap

La classe .card-title transforme un élément d’intitulé en titre principal de la carte. Pour ajouter un sous-titre, utilisez la classe .card-subtitle. La classe .text-muted permet de distinguer visuellement le titre du sous-titre.
Nous pouvons également distinguer le corps du texte de la carte du titre à l’aide de la classe .card-text.
Carte Bootstrap : titre et sous-titre .

Liens vers les cartes Bootstrap

Placez des liens à l’intérieur de votre carte avec la classe .card-link. Lorsqu’elle est incluse dans une balise , cette classe ajoute de la couleur, une décoration de texte et un style de survol au texte du lien. Elle espace également plusieurs liens adjacents pour qu’ils soient plus faciles à distinguer.
Carte Bootstrap : lien .

Vous pouvez également transformer votre carte entière en un lien cliquable avec la classe .stretched-link.
Carte Bootstrap : lien étiré .

Alignement du texte des cartes Bootstrap

Pour aligner les éléments à l’intérieur de votre carte, utilisez les classes d’alignement de Bootstrap : text-center centre les éléments enfants, et text-end aligne les éléments enfants à droite.
Carte Bootstrap : text align .

En-tête et pied de page de carte Bootstrap

Les en-têtes et les pieds de carte sont des régions ombragées situées en haut ou en bas de votre carte pour attirer l’attention ou fournir un contexte supplémentaire à la carte. Ajoutez un en-tête avec la classe .card-header et un pied de page avec la classe .card-footer.
Carte Bootstrap : en-tête et pied de page .

Liste de cartes Bootstrap

C’est ici que nous commençons à faire des choses plutôt cool avec les cartes. Avec la classe .list-group, nous pouvons ajouter une liste d’éléments à notre carte, séparés par des bordures. Ajoutez .list-group à la balise

    et .list-group-item à chaque balise

  • imbriquée. J’ai également ajouté la classe .list-group-flush à
      pour supprimer une certaine épaisseur de bordure supplémentaire.
      Carte Bootstrap : liste .

      Groupe de cartes Bootstrap

      Les cartes peuvent être organisées en éléments de type liste appelés groupes de cartes. Un groupe de cartes est une série de cartes adjacentes de même largeur qui s’adaptent à la largeur de leur conteneur. Pour créer un groupe de cartes, insérez une ou plusieurs classes .card dans une classe .card-group.
      Carte Bootstrap : groupe de cartes .

      Grille de cartes Bootstrap

      Vous pouvez également tirer parti du système de grille Bootstrap pour disposer vos cartes dans une grille. Ici, j’ai un élément .row défini sur deux colonnes de large. Chaque colonne contient deux cartes.
      Cartes Bootstrap : grille de cartes .

      Couleurs des cartes Bootstrap

      Vous en avez assez des cartes entièrement grises ? Très bien, ajoutons un peu de couleur. Nous pouvons modifier la couleur d’arrière-plan de nos cartes avec les utilitaires d’arrière-plan de Bootstrap.
      Cartes Bootstrap : couleur d’arrière-plan .

      De même, nous pouvons colorer le texte et les bordures de nos cartes avec les classes d’utilitaires Bootstrap .text-* et -border-* respectivement.
      Cartes Bootstrap : couleur du texte et de la bordure .

      Images de cartes Bootstrap

      Nous avons déjà vu quelques exemples d’images ajoutées aux cartes – il suffit d’insérer la balise à l’intérieur de la classe .card, et l’image occupera la largeur de la carte. Vous pouvez ajouter la classe .card-img-top à la balise pour placer l’image en haut de la carte, ou .card-img-bottom pour placer l’image en bas.
      Carte Bootstrap : image en haut et en bas .

      Vous pouvez également créer une carte avec une image d’arrière-plan. Tout d’abord, incluez votre image avec la classe .card-img. Ensuite, ajoutez un div avec la classe .card-img-overlay – les éléments à l’intérieur de ce div seront placés sur l’image d’arrière-plan.
      Carte Bootstrap : superposition d’images .

      Cartes Bootstrap horizontales

      Enfin, nous pouvons modifier l’orientation de nos cartes Bootstrap, de verticale à horizontale, grâce aux classes de cartes et aux classes de lignes et de colonnes de Bootstrap.
      Cartes Bootstrap : Cartes horizontales .

      Désencombrez votre interface utilisateur avec les cartes Bootstrap

      Comme nous l’avons vu, les cartes sont un élément de page flexible, adaptable et adapté aux mobiles. Elles constituent une solution idéale pour présenter des groupes de contenus connexes, et les utilisateurs apprécieront l’aspect familier des cartes sur n’importe quel site.
      Bootstrap est l’un des meilleurs moyens de créer des sites Web adaptés aux mobiles si vous êtes novice en HTML et CSS. Toutefois, nous vous recommandons d’acquérir une base solide des concepts HTML et CSS avant d’explorer le framework. Consultez notre guide HTML et CSS pour débutants ci-dessous pour savoir tout ce que les spécialistes du marketing et les nouveaux propriétaires de sites Web doivent savoir pour commencer.

Besoin de plus de visiteurs sur votre site Web ? Revenez à l’essentiel

Lorsque vous entendez le terme « SEO » ou « optimisation pour les moteurs de recherche », pour qui pensez-vous que cela implique que vous devriez optimiser votre site ? Eh bien, je vais vous donner un indice : ce n’est pas pour les moteurs …

Demander l’indexation Google pour être trouvé plus rapidement

Lors de l’indexation, les moteurs de recherche comme Google enregistrent les pages web dans leur répertoire. Seul ce qui se trouve dans ce répertoire est affiché aux utilisateurs dans dans la recherche Google. …

Votre site 100% Gratuit

Profitez de votre création de site gratuite 👍
* Offre limitée jusqu’à fin Novembre

Vous souhaitez poster un commentaire ?

0 commentaires