Tutoriel : Créer un site Internet en HTML avec Bootstrap

Ce tutoriel vous guide étape par étape pour créer un site simple en HTML en utilisant le framework Bootstrap. Chaque étape inclut le code à insérer.

Étape 1 : Préparer l'environnement

Créez un nouveau fichier nommé index.html dans votre éditeur de texte préféré.

Étape 2 : La structure de base du document

Voici la structure HTML de base :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mon Site avec Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <!-- Contenu ici -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Ce code définit la structure HTML de base avec Bootstrap intégré.

Étape 3 : Ajouter la barre de navigation (Navbar)

Insérez ce code dans la balise <body> :

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <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="#">À propos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Ce composant crée une barre de navigation responsive avec Bootstrap.

Étape 4 : Ajouter une section d'introduction (type Jumbotron)

Insérez ce code après la navbar :

<div class="container my-5">
  <div class="p-5 bg-light rounded-3">
    <h1 class="display-4">Bienvenue sur mon site !</h1>
    <p class="lead">Voici un site créé avec Bootstrap et HTML étape par étape.</p>
    <hr class="my-4" />
    <p>Vous pouvez personnaliser cette page à votre goût.</p>
    <a class="btn btn-primary btn-lg" href="#" role="button">En savoir plus</a>
  </div>
</div>

Ceci crée une section centrale avec un titre, un texte, et un bouton.

Étape 5 : Ajouter une section avec des cartes

Voici un exemple de trois cartes côte à côte :

<div class="container my-5">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <img src="https://placehold.co/600x400?text=Hello+World" class="card-img-top" alt="Image 1" />
        <div class="card-body">
          <h5 class="card-title">Titre 1</h5>
          <p class="card-text">Description de la première carte.</p>
          <a href="#" class="btn btn-primary">En savoir plus</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <img src="https://placehold.co/600x400?text=Hello+World" class="card-img-top" alt="Image 2" />
        <div class="card-body">
          <h5 class="card-title">Titre 2</h5>
          <p class="card-text">Description de la deuxième carte.</p>
          <a href="#" class="btn btn-primary">En savoir plus</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <img src="https://placehold.co/600x400?text=Hello+World" class="card-img-top" alt="Image 3" />
        <div class="card-body">
          <h5 class="card-title">Titre 3</h5>
          <p class="card-text">Description de la troisième carte.</p>
          <a href="#" class="btn btn-primary">En savoir plus</a>
        </div>
      </div>
    </div>
  </div>
</div>

Ce code crée trois cartes alignées horizontalement, adaptatives selon l'écran.

Étape 6 : Ajouter un pied de page

Insérez ce code à la fin du <body> :

<footer class="bg-dark text-white text-center py-4">
  <p>&copy; 2023 MonSite. Tous droits réservés.</p>
</footer>

Étape 7 : Assemblage final du fichier

Voici le fichier complet, vous pouvez le copier et l'enregistrer sous 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 avec Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <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="#">À propos</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Section d'introduction -->
    <div class="container my-5">
      <div class="p-5 bg-light rounded-3">
        <h1 class="display-4">Bienvenue sur mon site !</h1>
        <p class="lead">Voici un site créé avec Bootstrap et HTML étape par étape.</p>
        <hr class="my-4" />
        <p>Vous pouvez personnaliser cette page à votre goût.</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">En savoir plus</a>
      </div>
    </div>

    <!-- Section de cartes -->
    <div class="container my-5">
      <div class="row">
        <div class="col-md-4">
          <div class="card">
            <img src="https://placehold.co/600x400?text=Hello+World" class="card-img-top" alt="Image 1" />
            <div class="card-body">
              <h5 class="card-title">Titre 1</h5>
              <p class="card-text">Description de la première carte.</p>
              <a href="#" class="btn btn-primary">En savoir plus</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <img src="https://placehold.co/600x400?text=Hello+World" class="card-img-top" alt="Image 2" />
            <div class="card-body">
              <h5 class="card-title">Titre 2</h5>
              <p class="card-text">Description de la deuxième carte.</p>
              <a href="#" class="btn btn-primary">En savoir plus</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <img src="https://placehold.co/600x400?text=Hello+World" class="card-img-top" alt="Image 3" />
            <div class="card-body">
              <h5 class="card-title">Titre 3</h5>
              <p class="card-text">Description de la troisième carte.</p>
              <a href="#" class="btn btn-primary">En savoir plus</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Pied de page -->
    <footer class="bg-dark text-white text-center py-4">
      <p>&copy; 2025 MonSite. Tous droits réservés.</p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Enregistrez ce contenu dans un fichier nommé index.html et ouvrez-le dans votre navigateur pour voir le résultat complet.

Vous pouvez personnaliser chaque partie selon vos envies : changer les textes, les images, ou ajouter davantage de sections.

Voici l'aperçu du résultat ici