Correction TP les cards Bootstrap Ex02
Correction TP les cards Bootstrap Ex02
-
Objectifs
- Etre capable de mettre les cards dans les grilles en Bootstrap 4
-
Exercice 02
-
Énoncé
-
Solution
-
Vous pouvez visualiser l’énoncé de l’exercice
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grid Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Créez les deux blocs de cartes suivants</h1>
<h2>Bloc 01 :</h2>
<div class="card-group mb-5">
<div class="card">
<div class="card-header">En-tête de la première carte</div>
<div class="card-body">
<h3 class="card-title">Titre de la première carte</h5>
<img class="card-img-top" src="images/oasis1.jfif" alt="Card image cap">
<p class="card-text">Une ligne de texte dans notre première carte.</p>
<p class="card-text"><small class="text-muted">Ligne de texte supplémentaire</small></p>
</div>
<div class="card-footer">Pied de la première carte</div>
</div>
<div class="card">
<div class="card-header">En-tête de la seconde carte</div>
<div class="card-body">
<h3 class="card-title">Titre de la seconde carte</h5>
<img class="card-img-top" src="images/oasis2.jfif" alt="Card image cap">
<p class="card-text">Une ligne de texte dans notre seconde carte.</p>
</div>
<div class="card-footer">Pied de la seconde carte</div>
</div>
<div class="card">
<div class="card-header">En-tête de la troisième carte</div>
<div class="card-body">
<h3 class="card-title">Titre de la troisième carte</h5>
<img class="card-img-top" src="images/oasis3.jfif" alt="Card image cap">
<p class="card-text">Une ligne de texte dans notre troisième carte.</p>
</div>
<div class="card-footer">Pied de la troisième carte</div>
</div>
</div>
<h2>Bloc 02 :</h2>
<div class="card-deck">
<div class="card">
<div class="card-header">En-tête de la première carte</div>
<div class="card-body">
<h3 class="card-title">Titre de la première carte</h5>
<img class="card-img-top" src="images/oasis1.jfif" alt="Card image cap">
<p class="card-text">Une ligne de texte dans notre première carte.</p>
<p class="card-text"><small class="text-muted">Ligne de texte supplémentaire</small></p>
</div>
<div class="card-footer">En-tête de la première carte</div>
</div>
<div class="card">
<div class="card-header">En-tête de la seconde carte</div>
<div class="card-body">
<h3 class="card-title">Titre de la seconde carte</h5>
<img class="card-img-top" src="images/oasis2.jfif" alt="Card image cap">
<p class="card-text">Une ligne de texte dans notre seconde carte.</p>
</div>
<div class="card-footer">Pied de la seconde carte</div>
</div>
<div class="card">
<div class="card-header">En-tête de la seconde carte</div>
<div class="card-body">
<h3 class="card-title">Titre de la seconde carte</h5>
<img class="card-img-top" src="images/oasis3.jfif" alt="Card image cap">
<p class="card-text">Une ligne de texte dans notre troisième carte.</p>
</div>
<div class="card-footer">Pied de la seconde carte</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>