Skip to Content
BootstrapPartie 1 — Découvrir Bootstrap1.5 — Votre première page

1.5 — Votre première page

⏱️ TL;DR — Un starter template minimal : <!doctype html>, la balise viewport (indispensable au responsive), le CSS de Bootstrap dans <head>, le bundle JS avant </body>. On y ajoute une navbar, un container et une carte pour voir les trois piliers en action.

🎯 Objectifs

  • Écrire un document HTML Bootstrap complet et valide.
  • Comprendre pourquoi la balise viewport est obligatoire.
  • Reconnaître grille, composant et utilitaire dans une vraie page.

Le starter template

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <!-- INDISPENSABLE : sans viewport, le responsive ne marche pas -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ma première page Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1 class="text-center mt-5">Bonjour, Bootstrap !</h1>
 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

⚠️ Piège — Oublier <meta name="viewport">. Sans elle, le mobile affiche la page « dézoomée » et aucune media query ne se déclenche : la grille responsive semble cassée alors que le problème est cette seule ligne.

Une page qui montre les trois piliers

<!-- COMPOSANT : navbar -->
<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
  <div class="container">
    <a class="navbar-brand" href="#">MonSite</a>
  </div>
</nav>
 
<!-- GRILLE : container > row > col -->
<div class="container my-5">
  <div class="row g-4">
    <div class="col-md-6">
      <!-- COMPOSANT : card -->
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Colonne gauche</h5>
          <p class="card-text">Prend la moitié dès le breakpoint md.</p>
          <!-- UTILITAIRE : text-end -->
          <div class="text-end">
            <a href="#" class="btn btn-primary">Action</a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Colonne droite</h5>
          <p class="card-text">Sur mobile, elle passe dessous automatiquement.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Décryptage :

  • Grille : container centre le contenu ; row crée une rangée ; col-md-6 = deux colonnes de moitié à partir de md, empilées en dessous.
  • Composants : navbar, card, btn.
  • Utilitaires : my-5 (marge verticale), g-4 (gouttières), text-end, bg-primary.

💡 Pour un dev React — Ce markup est du HTML pur. Dans React, vous colleriez les mêmes className. Le seul point d’attention : les composants interactifs (navbar collapse, dropdown) reposent sur le JS de Bootstrap — préférez react-bootstrap pour les gérer proprement.

✏️ Exercices

  1. Ajoutez une troisième carte pour avoir trois colonnes égales sur desktop et une pleine largeur sur mobile.

✅ Solution

Passez les colonnes en col-md-4 (3 × 4 = 12) :

<div class="row g-4">
  <div class="col-md-4"><div class="card">…</div></div>
  <div class="col-md-4"><div class="card">…</div></div>
  <div class="col-md-4"><div class="card">…</div></div>
</div>
  1. Que se passe-t-il si vous retirez la balise viewport et ouvrez la page sur mobile ?

✅ Solution

La page s’affiche à sa largeur desktop, « dézoomée », et les breakpoints responsives ne se déclenchent pas.

🧠 Quiz de révision

1. Quelle balise <meta> est indispensable au responsive ?

<meta name="viewport" content="width=device-width, initial-scale=1">.

2. Où placer le CSS et où placer le JS ?

Le CSS dans <head>, le JS (bundle) juste avant </body>.

3. Que fait col-md-6 ?

La colonne prend la moitié de la rangée à partir du breakpoint md, et pleine largeur en dessous.

4. container sert à quoi ?

À centrer et limiter la largeur du contenu (avec des paddings latéraux).

5. bg-primary est-il un composant ou un utilitaire ?

Un utilitaire (classe de couleur de fond).

🎉 Vous avez fini la Partie 1 ! Partie suivante : Partie 2 — Mise en page : grille & layout

1.4 — La structure des fichiers distVue d'ensemble