Correction TP les cards Bootstrap Ex05

Correction TP les cards Bootstrap Ex05

  1. Objectifs

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

    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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
          </head>
          <body>
            <div class="container-fluid">
              <div class="card-columns">
              <!-- Card 1 -->
              <div class="card">
              <div class="card-header">Carte 01</div>
              <div class="card-body">
              <p class="card-text">Texte pour cette carte.</p>
              </div>
              </div>
              
              <!-- Card 2 -->
              <div class="card">
              <div class="card-body">
              <h4 class="card-title">Carte 02</h4>
              <p class="card-text">Texte pour cette carte.</p>
              </div>
              </div>
              
              <!-- Card 3 -->
              <div class="card">
              <div class="card-header">Carte 03</div>
              <div class="card-body">
              <p class="card-text">Texte pour cette carte.</p>
              </div>
              <div class="card-footer">Footer</div>
              </div>
              
              <!-- Card 4 -->
              <div class="card">
              <div class="card-header">Carte 04</div>
              <div class="card-body">
                <p class="card-text">Texte pour cette carte.</p>
              </div>
              <div class="card-footer">Footer</div>
              </div>
              
              <!-- Card 5 -->
              <div class="card">
              <div class="card-body">
              <h4 class="card-title">Carte 05</h4>
              <p class="card-text">Texte pour cette carte.</p>
              </div>
              </div>
              
              <!-- Card 6 -->
              <div class="card">
              <div class="card-header">Carte 06</div>
              <div class="card-body">
              <p class="card-text">Texte pour cette carte.</p>
              </div>
              </div>
              
              <!-- Card 7 -->
              <div class="card">
              <div class="card-header">Carte 07</div>
              <div class="card-body">
              <p class="card-text">Texte pour cette carte.</p>
              </div>
              <div class="card-footer">Footer</div>
              </div>
              
              <!-- Card 8 -->
              <div class="card">
              <div class="card-body">
              <h4 class="card-title">Carte 08</h4>
              <p class="card-text">Texte pour cette carte.</p>
              </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