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

Correction TP les cards Bootstrap Ex02

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

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