Correction TP les cards Bootstrap Ex04

Correction TP les cards Bootstrap Ex04

  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>



Abonnez vous à notre chaîne YouTube gratuitement