Skip to content
Learni
View all tutorials
Développement Web

Comment créer un site responsive avec Bootstrap 5 en 2026

12 minBEGINNER
ResponsiveBootstrapCSSHTMLFrontend

Introduction

Bootstrap 5 reste en 2026 le framework CSS leader pour créer des interfaces web responsive et mobiles en premier. Lancé sans jQuery, il offre plus de 1 500 classes utilitaires prêtes à l'emploi, une grille 12 colonnes flexible et des composants comme les navbars ou cards qui s'adaptent automatiquement aux écrans. Pourquoi l'utiliser ? Il accélère le développement de 30-50 % en évitant de coder du CSS from scratch, tout en garantissant l'accessibilité (ARIA) et la compatibilité cross-browser.

Ce tutoriel beginner vous guide pas à pas : de l'inclusion via CDN à un site complet avec grille, boutons, navigation, cards et formulaire. Chaque exemple est un fichier HTML autonome, testable immédiatement dans votre navigateur. À la fin, vous saurez builder un landing page responsive en moins d'une heure. Parfait pour freelances ou juniors boostant leur productivité.

Prérequis

  • Connaissances de base en HTML et CSS (balises, sélecteurs).
  • Un éditeur de code comme VS Code.
  • Un navigateur moderne (Chrome, Firefox).
  • Pas besoin de Node.js : on utilise le CDN pour démarrer en 30 secondes.

Inclure Bootstrap 5 via CDN

index.html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon site Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
  <div class="container text-center my-5">
    <h1 class="display-4">Hello, Bootstrap 5 !</h1>
    <p class="lead">Votre premier conteneur responsive est prêt.</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

Ce fichier HTML complet intègre Bootstrap 5.3.3 via CDN (CSS en head, JS en bas de body). La meta viewport assure le responsive. Le conteneur centre le contenu et s'adapte aux écrans. Ouvrez-le directement en double-cliquant : tout fonctionne sans serveur.

Comprendre l'inclusion et le conteneur

Le CDN (Content Delivery Network) charge Bootstrap depuis jsDelivr, ultra-rapide et sans build. Imaginez-le comme importer une bibliothèque prête : pas d'installation npm. Le container est votre boîte magique : il centre (max 1140px desktop) et ajoute des marges. Sans lui, le contenu colle aux bords sur mobile. Testez en redimensionnant la fenêtre : le texte s'ajuste parfaitement.

Implémenter la grille responsive

grille.html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grille Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
  <div class="container my-5">
    <h2>Grille responsive 12 colonnes</h2>
    <div class="row">
      <div class="col-md-4 bg-primary text-white p-4 mb-3">Colonne 1 (plein écran mobile)</div>
      <div class="col-md-4 bg-success text-white p-4 mb-3">Colonne 2</div>
      <div class="col-md-4 bg-danger text-white p-4 mb-3">Colonne 3</div>
    </div>
    <div class="row">
      <div class="col-12 col-sm-6 col-lg-3 bg-warning p-4">4 colonnes égales sur LG</div>
      <div class="col-12 col-sm-6 col-lg-3 bg-info text-white p-4">Responsive : stack sur mobile</div>
      <div class="col-12 col-sm-6 col-lg-3 bg-secondary text-white p-4">Breakpoints : XS,SM,MD,LG,XL</div>
      <div class="col-12 col-sm-6 col-lg-3 bg-dark text-white p-4">Copiez et testez !</div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

La grille utilise row pour aligner horizontalement et col-* pour la largeur (12=100 %). col-md-4 : 33 % sur medium+, full sur petit. Breakpoints : sm(576px), md(768), lg(992), xl(1200), xxl(1400). Les fonds colorés visualisent l'adaptation. Piège : toujours row > col, jamais col direct dans container.

Maîtriser la grille Bootstrap

Pensez la grille comme un gâteau 12 parts : col-6 = moitié. Les préfixes (md-, lg-) stackent sur mobile (xs par défaut). Avantage : un code gère tous les écrans, pas de media queries manuelles. Ajoutez g-3 sur row pour espacements uniformes (gutters).

Ajouter boutons et utilitaires

boutons.html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Boutons Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
  <div class="container my-5">
    <h2>Boutons et couleurs</h2>
    <div class="row g-3">
      <div class="col-12">
        <button class="btn btn-primary btn-lg">Primary Large</button>
        <button class="btn btn-success">Success</button>
        <button class="btn btn-outline-danger">Outline Danger</button>
        <button class="btn btn-secondary disabled">Désactivé</button>
      </div>
      <div class="col-12">
        <span class="badge bg-primary">Badge 1</span>
        <span class="badge text-bg-success">Badge 2</span>
        <span class="badge rounded-pill bg-info">Pill</span>
      </div>
      <div class="col-12">
        <p class="text-primary fw-bold fs-4">Texte utilitaire : gras, couleur, taille.</p>
        <p class="text-muted">Grâce aux 1 500+ classes, pas de CSS custom.</p>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

Les boutons btn- ont 8 variantes (primary, secondary...). Ajoutez lg/sm pour tailles, outline- pour bordures. Badges pour labels compacts. Utilitaires comme text-, fw-bold (font-weight), fs-* stylisent sans CSS. Piège : surchargez pas, Bootstrap priorise.

Utilitaires et boutons en action

Les utilitaires sont des one-shot : my-5 = margin Y 3rem, p-4=padding. Couleurs sémantiques (primary=bleu action) guident l'UX. Sur hover, les btns ont transitions natives. Protip : d-flex justify-content-center pour centrer flex.

Construire une navbar responsive

navbar.html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">MonSite</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link active" href="#">Accueil</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container my-5">
    <p>Navbar collapse sur mobile : burger auto !</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

navbar-expand-lg étend sur large, burger sur petit. data-bs-toggle active JS pour collapse. ARIA labels pour accessibilité. Le bundle JS gère tout (popper pour dropdowns). Testez resize : menu se replie parfaitement.

Navbar : le squelette de navigation

La navbar est plug-and-play : navbar-brand logo, nav-link items. bg-body-tertiary fond subtil. Sur mobile, le toggler JS ouvre/ferme sans config. Analogie : un accordéon responsive.

Créer des cards et formulaire

cards-form.html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cards et Formulaire</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
  <div class="container my-5">
    <div class="row g-4">
      <div class="col-md-6">
        <div class="card h-100">
          <img src="https://via.placeholder.com/400x200" class="card-img-top" alt="Image card">
          <div class="card-body">
            <h5 class="card-title">Titre Card 1</h5>
            <p class="card-text">Contenu responsive, shadows auto.</p>
            <a href="#" class="btn btn-primary">Lire plus</a>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <form>
          <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email" placeholder="votre@email.com">
          </div>
          <div class="mb-3">
            <label for="message" class="form-label">Message</label>
            <textarea class="form-control" id="message" rows="3"></textarea>
          </div>
          <button type="submit" class="btn btn-success">Envoyer</button>
        </form>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

Cards : card-body, img top, btn inside. h-100 égalise hauteurs. Formulaire : form-control style auto, mb-3 espacement, validation native (:valid). Placeholder et labels ARIA-ready. Intégrez dans grille pour layout parfait.

Cards et formulaires : composants clés

Les cards sont des boîtes flexibles pour produits/blog. Formulaires gagnent validation browser (required+). rows=3 pour textarea. Prochain : combinez tout dans un dashboard.

Bonnes pratiques

  • Toujours meta viewport : sans elle, pas de responsive.
  • Nestez row > col : container direct col = bugs gutters.
  • Utilitaires first : moins de CSS custom, maintenance facile.
  • Testez F12 mobile : emulatez devices avant deploy.
  • Accessibilité : utilisez aria-*, focus visibles (btn-focus).

Erreurs courantes à éviter

  • Oublier JS bundle : navbar/dropdowns cassés.
  • col sans row : colonnes full-width buggées.
  • CSS custom avant Bootstrap : surchargez !important inutiles.
  • Ignorer breakpoints : testez SM/MD, pas que desktop.

Pour aller plus loin

Plongez dans la doc officielle Bootstrap 5. Customisez avec Sass (npm install). Maîtrisez modals/toasts JS. Découvrez nos formations Learni Dev pour React + Bootstrap ou Tailwind alternatives.