Back

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
        3. <!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>



author avatar
Riadh HAJJI

Riadh HAJJI

You may also like

TP9 : Plateforme de Location de Salles en Ligne
8 mars, 2024

TP1 Plateforme de formation web en ligne TP2 Gestion d’une boulangerie-pâtisserie TP3 Création d’un site de formation en ligne TP4 Les Oasis de Tunisie TP5 Gestion d’un cabinet médical TP6 Développement d’un site web de formation en ligne TP7 Vente …

TP8 Création d’un projet Bootstrap
22 mars, 2023

TP1 Plateforme de formation web en ligne TP2 Gestion d’une boulangerie-pâtisserie TP3 Création d’un site de formation en ligne TP4 Les Oasis de Tunisie TP5 Création d’un projet Bootstrap TP6 Création d’un projet Bootstrap TP7 Création d’un projet Bootstrap TP8 …

Examen 5 en HTML , CSS et Bootstrap
19 mai, 2022

Examen en HTML et CSS Examen 2 en HTML et CSS Examen 3 en HTML , CSS et JS Examen 4 en HTML , CSS et JS Examen 5 en HTML , CSS et Bootstrap Examen 5 en HTML , …