Correction TP les cards Bootstrap Ex04
Correction TP les cards Bootstrap Ex04
-
Objectifs
- Etre capable de mettre les cards dans les grilles en Bootstrap 4
-
Exercice 04
-
É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">
<center><h4 class="text-primary">TP Card Bootstrap Ex04</h4></head></center>
</head>
<body>
<!--/////////////////////////////////////////////////-->
<div class="container">
<h5 class="text-success">Modèle 01</h5>
<div class="row">
<div class="col-sm-4">
<div class="card text-dark bg-light">
<div class="card-header bg-primary text-center text-warning"><h4>Nos ordinateurs</h4></div>
<div class="card-body ">
<h5 class="card-title">Ordinateurs d’occasion</h5>
<p class="card-text text-left">Tous nos ordinateurs d’occasion, sont réinstallés à neuf avec pack logiciels et garantis 3 mois. </p>
</div>
<div class="card-footer bg-primary border-warning text-right">
<a href="#" class="btn btn-danger btn-sm">Achetez</a> <a href="#" class="btn btn-warning btn-sm">Plus d'info</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-dark bg-light">
<div class="card-header bg-primary text-center text-warning"><h4>Nos tablettes</h4></div>
<div class="card-body ">
<h5 class="card-title">Toutes les marques</h5>
<p class="card-text text-left">Découvrez notre sélection de tablettes tactiles parmi les plus grandes marques dans le monde.</p>
</div>
<div class="card-footer bg-primary border-warning text-right">
<a href="#" class="btn btn-danger btn-sm">Achetez</a> <a href="#" class="btn btn-warning btn-sm">Plus d'info</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-dark bg-light">
<div class="card-header bg-primary text-center text-warning"><h4>Nos téléphones</h4></div>
<div class="card-body ">
<h5 class="card-title">Téléphone Mobile</h5>
<p class="card-text text-left">Pour acheter un smartphone en ligne, il faut dans un premier temps rentrer sur le site... </p>
</div>
<div class="card-footer bg-primary border-warning text-right">
<a href="#" class="btn btn-danger btn-sm">Achetez</a> <a href="#" class="btn btn-warning btn-sm">Plus d'info</a>
</div>
</div>
</div>
</div>
</div>
<!--/////////////////////////////////////////////////-->
<div class="container">
<h5 class="text-success">Modèle 02</h5>
<div class="row">
<div class="col-sm-4">
<div class="card text-dark bg-warning">
<div class="card-header bg-info text-left text-light"><h4>Nos ordinateurs</h4></div>
<div class="card-body ">
<h5 class="card-title">Ordinateurs d’occasion</h5>
<p class="card-text text-left">Tous nos ordinateurs d’occasion, sont réinstallés à neuf avec pack logiciels et garantis 3 mois. </p>
</div>
<div class="card-footer bg-info text-right text-danger">
<a href="#" class="btn btn-outline-light btn-sm">Achetez</a> <a href="#" class="btn btn-outline-light btn-sm">Plus d'info</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-dark bg-warning">
<div class="card-header bg-info text-left text-light"><h4>Nos tablettes</h4></div>
<div class="card-body ">
<h5 class="card-title">Toutes les marques</h5>
<p class="card-text text-left">Découvrez notre sélection de tablettes tactiles parmi les plus grandes marques dans le monde.</p>
</div>
<div class="card-footer bg-info text-right text-danger">
<a href="#" class="btn btn-outline-light btn-sm">Achetez</a> <a href="#" class="btn btn-outline-light btn-sm">Plus d'info</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-dark bg-warning">
<div class="card-header bg-info text-left text-light"><h4>Nos téléphones</h4></div>
<div class="card-body ">
<h5 class="card-title">Téléphone Mobile</h5>
<p class="card-text text-left">Pour acheter un smartphone en ligne, il faut dans un premier temps rentrer sur le site... </p>
</div>
<div class="card-footer bg-info text-right text-danger">
<a href="#" class="btn btn-outline-light btn-sm">Achetez</a> <a href="#" class="btn btn-outline-light btn-sm">Plus d'info</a>
</div>
</div>
</div>
</div>
</div>
<!--/////////////////////////////////////////////////-->
<!--/////////////////////////////////////////////////-->
<div class="container">
<h5 class="text-success">Modèle 03</h5>
<div class="row">
<div class="col-sm-4">
<div class="card text-dark bg-warning">
<img class="card-img-top" src="images/ordinateur1.jfif" alt="image alt text here">
<div class="card-body ">
<h5 class="card-title">Ordinateurs d’occasion</h5>
<p class="card-text text-left">Tous nos ordinateurs d’occasion, sont réinstallés à neuf avec pack logiciels et garantis 3 mois. </p>
</div>
<div class="card-footer bg-info text-right text-danger">
<a href="#" class="btn btn-outline-light btn-sm">Achetez</a> <a href="#" class="btn btn-outline-light btn-sm">Plus d'info</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-dark bg-warning">
<img class="card-img-top" src="images/tablette1.jfif" alt="image alt text here">
<div class="card-body ">
<h5 class="card-title">Toutes les marques</h5>
<p class="card-text text-left">Découvrez notre sélection de tablettes tactiles parmi les plus grandes marques dans le monde.</p>
</div>
<div class="card-footer bg-info text-right text-danger">
<a href="#" class="btn btn-outline-light btn-sm">Achetez</a> <a href="#" class="btn btn-outline-light btn-sm">Plus d'info</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-dark bg-warning">
<img class="card-img-top" src="images/telephone1.jfif" alt="image alt text here">
<div class="card-body ">
<h5 class="card-title">Téléphone Mobile</h5>
<p class="card-text text-left">Pour acheter un smartphone en ligne, il faut dans un premier temps rentrer sur le site... </p>
</div>
<div class="card-footer bg-info text-right text-danger">
<a href="#" class="btn btn-outline-light btn-sm">Achetez</a> <a href="#" class="btn btn-outline-light btn-sm">Plus d'info</a>
</div>
</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>