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

Correction TP les cards Bootstrap Ex05

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

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