Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
Bootstrap

Correction TP les cards Bootstrap Ex04

Un cours complet pour maîtriser Correction TP les cards Bootstrap Ex04.

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours
Sommaire du cours
historique de bootstrap
Présentation de bootstrap
Installation de Bootstrap
La Syntaxe de base de Bootstrap
Les bases de Bootstrap et template de démarrage
Le système de grille Bootstrap
La grille de Bootstrap en pratique
Exercices positionnement sur Grille Bootstrap
Alignement avec Bootstrap
TP la grille Bootstrap
Les classes pull et push
Typographie de Bootstrap
Les tableaux dans Bootstrap
Menus de navigation (Navbar)
Les barres d'outils standard Bootstrap
Autres catégories
News
Microsoft Office
Les cours de programmation
MOS
WordPress
Ressources pédagogiques
Voir tout le catalogue

  1. Objectifs

    • Etre capable de mettre les cards dans les grilles en Bootstrap 4

  2. Exercice 04

    1. Énoncé
    2. Solution
      <!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>