06 - Introduction à Bootstrap

Article publié le Dimanche 05 avril 2026 , lu 6 fois

Jusqu’à présent, nous avons créé un site avec HTML et CSS.

Mais écrire tout le CSS à la main peut être long.

Bootstrap est un framework qui permet de créer rapidement des interfaces modernes.

1. Qu’est-ce que Bootstrap ?

Bootstrap est une bibliothèque CSS prête à l’emploi.

Elle fournit :

Le plus simple est d’utiliser le CDN :

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

À placer dans la balise <head>.

Bootstrap utilise un système de grille basé sur 12 colonnes.

<div class="container">
    <div class="row">
        <div class="col">Colonne 1</div>
        <div class="col">Colonne 2</div>
    </div>
</div>

Les colonnes s’adaptent automatiquement selon l’écran.

<div class="row">
    <div class="col-md-6">50% sur écran moyen</div>
    <div class="col-md-6">50% sur écran moyen</div>
</div>

Sur mobile, les blocs passent automatiquement en colonne.

Bootstrap propose de nombreux composants prêts à l’emploi.

Exemple : bouton

<button class="btn btn-primary">Cliquez ici</button>

Exemple : carte

<div class="card">
    <div class="card-body">
        Contenu
    </div>
</div>

Bootstrap permet aussi de styliser rapidement :

<div class="text-center mt-3">Texte centré</div>

Vous pouvez maintenant créer des interfaces modernes rapidement.

Dans le prochain chapitre, nous allons introduire PHP pour rendre le site dynamique.