Bootstrap 4 - Cartes
La description
La carte est un conteneur de contenu qui affiche une boîte bordée avec un peu de remplissage autour d'elle. Il comprend des couleurs d'arrière-plan, des en-têtes, des pieds de page et d'autres options d'affichage.
Carte de base
Pour obtenir une carte de base, ajoutez simplement la classe .card à l'élément <div> et placez le contenu dans une classe .card-body comme indiqué dans l'exemple suivant -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Basic Card</h2>
<div class = "card">
<div class = "card-body">
<h5 class = "card-title">Tutorialspoint</h5>
<p class = "card-text">
Our mission is to deliver Simply Easy Learning with clear, crisp, and
to-the-point content on a wide range of technical and non-technical
subjects without any preconditions and impediments.
</p>
<a href="#" class = "btn btn-info">More Info</a>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
En-tête et pied de page
Vous pouvez ajouter un en-tête pour la carte à l'aide de la classe et du pied de page .card-header à l'aide de la classe .card-footer .
L'exemple suivant illustre ceci -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Card Header and Footer</h2>
<div class = "card">
<div class = "card-header">Card Header</div>
<div class = "card-body">
<h5 class = "card-title">Tutorialspoint</h5>
<p class = "card-text">
Our mission is to deliver Simply Easy Learning with clear, crisp, and
to-the-point content on a wide range of technical and non-technical
subjects without any preconditions and impediments.
</p>
<a href = "#" class = "btn btn-info">More Info</a>
</div>
<div class = "card-footer">Card Footer</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Liste des groupes
Vous pouvez créer une liste de contenu pour les cartes en utilisant la classe .list-group-flush comme indiqué dans l'exemple ci-dessous -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>List Groups</h2>
<div class = "card" style = "width: 18rem;">
<div class = "card-header">Card Header</div>
<ul class = "list-group list-group-flush">
<li class = "list-group-item">HTML-5</li>
<li class = "list-group-item">CSS-3</li>
<li class = "list-group-item">Bootstrap-4</li>
</ul>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Cartes contextuelles
Bootstrap utilise des classes contextuelles telles que .bg-primary , .bg-success , .bg-info , .bg-warning , .bg-danger , .bg-secondary , .bg-dark et .bg-light pour changer la couleur d'arrière-plan de la carte.
L'exemple suivant illustre ceci -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h3>Contextual Cards</h3>
<div class = "card bg-primary text-white">
<div class = "card-body">Primary card</div>
</div>
<br>
<div class = "card bg-success text-white">
<div class = "card-body">Success card</div>
</div>
<br>
<div class = "card bg-info text-white">
<div class = "card-body">Info card</div>
</div>
<br>
<div class = "card bg-warning text-white">
<div class = "card-body">Warning card</div>
</div>
<br>
<div class = "card bg-danger text-white">
<div class = "card-body">Danger card</div>
</div>
<br>
<div class = "card bg-secondary text-white">
<div class = "card-body">Secondary card</div>
</div>
<br>
<div class = "card bg-dark text-white">
<div class = "card-body">Dark card</div>
</div>
<br>
<div class = "card bg-light text-dark">
<div class = "card-body">Light card</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Images de cartes (haut et bas)
Vous pouvez placer l'image en haut de la carte en utilisant la classe .card-img-top ou en bas en utilisant la classe .card-img-bottom sur l'élément <img> comme indiqué dans l'exemple ci-dessous -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Image at Top</h2>
<div class = "card" style = "width:350px;height:400px">
<img class = "card-img-top" src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg"
alt = "Card Image Top">
<div class = "card-body">
<h4 class = "card-title">HTML</h4>
<p class = "card-text">
HTML stands for Hypertext Markup Language, and it is the most widely
used language to write Web Pages.
</p>
<a href = "#" class = "btn btn-primary">More Info</a>
</div>
</div>
<br>
<h2>Image at Bottom</h2>
<div class = "card" style = "width:350px;height:400px">
<div class = "card-body">
<h4 class = "card-title">CSS</h4>
<p class = "card-text">
Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages
presentable.
</p>
<a href = "#" class = "btn btn-primary">More Info</a>
</div>
<img class = "card-img-bottom"
src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg"
alt = "Card Image Bottom">
</div>
<br>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Superposition d'image de carte
Ajoutez l'image d'arrière-plan à une carte et placez le texte en haut d'une image à l'aide de la classe .card-img-overlay .
L'exemple suivant illustre ceci -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Image Overlay</h2>
<div class = "card" style = "width:350px;height:400px">
<img class = "card-img-top"
src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg"
alt = "Card image" style = "width:100%">
<div class = "card-img-overlay">
<p class = "card-text text-white">
HTML stands for Hypertext Markup Language. It is the most widely used
language to write Web Pages
</p>
<a href = "#" class = "btn btn-primary">More Info</a>
</div>
<div class = "card-body">
<h4 class = "card-title">HTML</h4>
<p class = "card-text">
HTML was developed with the intent of defining the structure of
documents like headings, paragraphs, lists, and so forth to
facilitate the sharing of scientific information between researchers.
</p>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Groupes de cartes
Les groupes de cartes peuvent être utilisés pour placer plusieurs cartes comme un seul élément attaché. La classe .card-group spécifie des colonnes de largeur et de hauteur égales et supprime les marges gauche et droite entre chaque carte.
Note - Sur les petits écrans (moins de 576 px), les cartes seront affichées verticalement avec les marges du haut et du bas.
L'exemple suivant montre l'affichage des groupes de cartes en tant qu'élément attaché unique -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Card-Groups</h2>
<div class = "card-group">
<div class = "card">
<img class = "card-img-top"
src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg"
alt = "Card Groups">
<div class = "card-body">
<h5 class = "card-title">HTML</h5>
<p class = "card-text">
HTML stands for Hypertext Markup Language, and it is the most
widely used language to write Web Pages.
</p>
</div>
<div class = "card-footer">
<small class = "text-muted">Card Footer</small>
</div>
</div>
<div class = "card">
<img class = "card-img-top"
src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg"
alt = "Card Groups">
<div class = "card-body">
<h5 class = "card-title">CSS</h5>
<p class = "card-text">
Cascading Style Sheets, fondly referred to as CSS, is a simple
design language intended to simplify the process of making web
pages presentable.
</p>
</div>
<div class = "card-footer">
<small class = "text-muted">Card Footer</small>
</div>
</div>
<div class = "card">
<img class = "card-img-top"
src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg"
alt = "Card Groups">
<div class = "card-body">
<h5 class = "card-title">Bootstrap</h5>
<p class = "card-text">
Bootstrap is a sleek, intuitive, and powerful, mobile first
front-end framework for faster and easier web development.
</p>
</div>
<div class = "card-footer">
<small class = "text-muted">Card Footer</small>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Decks de cartes
Les jeux de cartes spécifient des colonnes de largeur et de hauteur égales qui ne sont pas attachées les unes aux autres. Vous pouvez le faire en utilisant la classe .card-deck .
L'exemple suivant illustre ceci -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Card Decks</h2>
<div class = "card-deck">
<div class = "card">
<img class="card-img-top"
src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg"
alt = "Card Groups">
<div class = "card-body">
<h5 class = "card-title">HTML</h5>
<p class = "card-text">
HTML stands for Hypertext Markup Language, and it is the most
widely used language to write Web Pages.
</p>
</div>
<div class = "card-footer">
<small class = "text-muted">Card Footer</small>
</div>
</div>
<div class = "card">
<img class = "card-img-top"
src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg"
alt = "Card Groups">
<div class = "card-body">
<h5 class = "card-title">CSS</h5>
<p class = "card-text">
Cascading Style Sheets, fondly referred to as CSS, is a simple
design language intended to simplify the process of making web
pages presentable.
</p>
</div>
<div class = "card-footer">
<small class = "text-muted">Card Footer</small>
</div>
</div>
<div class = "card">
<img class = "card-img-top"
src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg"
alt = "Card Groups">
<div class = "card-body">
<h5 class = "card-title">Bootstrap</h5>
<p class = "card-text">
Bootstrap is a sleek, intuitive, and powerful, mobile first
front-end framework for faster and easier web development.
</p>
</div>
<div class = "card-footer">
<small class = "text-muted">Card Footer</small>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Colonnes de cartes
Les cartes peuvent être placées dans la structure de mise en page de la grille en utilisant la classe .card-columns comme indiqué dans l'exemple ci-dessous -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Card Columns</h2>
<div class =" card-columns">
<!-- Card 1 -->
<div class = "card">
<div class = "card-header">Card Header</div>
<div class = "card-body">
<p class = "card-text">This is Card - 1</p>
</div>
</div>
<!-- Card 2 -->
<div class = "card">
<div class = "card-body">
<p class = "card-text">This is Card - 2</p>
</div>
</div>
<!-- Card 3 -->
<div class = "card">
<div class = "card-header">Card Header</div>
<div class = "card-body">
<p class = "card-text">
This is Card - 3 with
<a href = "#" class = "card-link">link</a>
</p>
</div>
<div class = "card-footer">Card Footer</div>
</div>
<!-- Card 4 -->
<div class = "card">
<div class = "card-header">Card Header</div>
<div class = "card-body">
<p class = "card-text">This is Card - 4</p>
</div>
<div class = "card-footer">Card Footer</div>
</div>
<!-- Card 5 -->
<div class = "card">
<div class = "card-body">
<h4 class = "card-title">Card Title</h4>
<p class = "card-text">This is Card - 5</p>
</div>
</div>
<!-- Card 6 -->
<div class = "card">
<div class = "card-header">Card Header</div>
<div class = "card-body">
<p class = "card-text">
This is Card - 6 with <a href = "#" class = "card-link">link</a>
</p>
</div>
</div>
<!-- Card 7 -->
<div class = "card">
<div class = "card-header">Card Header</div>
<div class = "card-body">
<p class = "card-text">This is Card - 7</p>
</div>
<div class = "card-footer">Card Footer</div>
</div>
<!-- Card 8 -->
<div class = "card text-white" >
<!-- Image -->
<img class = "card-img"
src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg"
alt = "Photo of Cat">
<!-- Text Content -->
<div class = "card-img-overlay">
<h4 class = "card-title">Card 8</h4>
<p class = "card-text">This is an image for Card - 8</p>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
La navigation
Vous pouvez créer un onglet de navigation ou une pilule de navigation sur la carte en ajoutant la classe .card-header-tabs ou la classe .card-header-pills à l'élément <ul>.
L'exemple suivant montre l'ajout de l'onglet de navigation et de la pilule de navigation à la carte -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Navigation Tab</h2>
<div class = "card text-center">
<div class = "card-header">
<ul class = "nav nav-tabs card-header-tabs">
<li class = "nav-item">
<a class = "nav-link active" href = "#">HTML</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">CSS</a>
</li>
<li class = "nav-item">
<a class = "nav-link " href = "#">Bootstrap</a>
</li>
</ul>
</div>
<div class = "card-body">
<h5 class = "card-title">Title</h5>
<p class = "card-text">Content goes here...</p>
</div>
</div>
<br>
<h2>Navigation Pill</h2>
<div class = "card text-center">
<div class = "card-header">
<ul class = "nav nav-pills card-header-pills">
<li class = "nav-item">
<a class = "nav-link active" href = "#">HTML</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">CSS</a>
</li>
<li class = "nav-item">
<a class = "nav-link " href = "#">Bootstrap</a>
</li>
</ul>
</div>
<div class = "card-body">
<h5 class = "card-title">Title</h5>
<p class = "card-text">Content goes here...</p>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -