Correction TP les cards Bootstrap Ex02

Correction TP les cards Bootstrap Ex02

  1. Objectifs

    • Etre capable de mettre les cards dans les grilles en Bootstrap 4
  2. Exercice 02

    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">
          </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>



Abonnez vous à notre chaîne YouTube gratuitement