Tutoriel Bootstrap

Créez des sites responsive rapidement avec Bootstrap

Créez un compte gratuitement

Suivez votre progression, sauvegardez vos avancées et obtenez des certificats de complétion. Rejoignez des milliers d'apprenants qui développent leurs compétences avec nous !

Suivi de progression détaillé

Certificats téléchargeables

Badges et accomplissements

Créer mon compte gratuit J'ai déjà un compte

Introduction à Bootstrap

Bootstrap est le framework CSS le plus populaire au monde pour créer des sites web responsive et mobile-first rapidement.

🚀 Pourquoi utiliser Bootstrap ?

✅ Gain de temps - Composants prêts à l'emploi
✅ Responsive - Mobile-first par défaut
✅ Cohérence - Design uniforme
✅ Communauté - Documentation complète et support actif
✅ Personnalisable - Facile à adapter à votre marque

📦 Installation

Il existe plusieurs façons d'intégrer Bootstrap dans votre projet.

Via CDN (le plus simple)


                        <!-- CSS -->

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


                        <!-- JavaScript Bundle -->

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

📐 Système de grille

Le système de grille Bootstrap utilise Flexbox et permet de créer des layouts responsive avec 12 colonnes.

Structure de base


                        <div class="container">

                          <div class="row">

                            <div class="col-md-6">Colonne 1</div>

                            <div class="col-md-6">Colonne 2</div>

                          </div>

                        </div>

Breakpoints

col- - Extra small (<576px)
col-sm- - Small (≥576px)
col-md- - Medium (≥768px)
col-lg- - Large (≥992px)
col-xl- - Extra large (≥1200px)
col-xxl- - Extra extra large (≥1400px)

📦 Containers

Les containers sont les éléments de base pour contenir et aligner votre contenu.


                        <!-- Container fixe -->

                        <div class="container">...</div>


                        <!-- Container fluide (100% largeur) -->

                        <div class="container-fluid">...</div>


                        <!-- Container responsive -->

                        <div class="container-md">...</div>

✍️ Typographie

Bootstrap fournit des styles par défaut pour tous les éléments typographiques.


                        <h1 class="display-1">Display 1</h1>

                        <p class="lead">Texte important</p>

                        <p class="text-muted">Texte atténué</p>

                        <mark>Texte surligné</mark>

🎨 Couleurs

Bootstrap propose des classes de couleurs contextuelles pour le texte et les arrière-plans.


                        <!-- Couleurs de texte -->

                        <p class="text-primary">Texte primaire</p>

                        <p class="text-success">Texte succès</p>

                        <p class="text-danger">Texte danger</p>


                        <!-- Arrière-plans -->

                        <div class="bg-primary text-white">Fond primaire</div>

🔘 Boutons

Bootstrap propose de nombreux styles de boutons prêts à l'emploi.


                        <button class="btn btn-primary">Primaire</button>

                        <button class="btn btn-success">Succès</button>

                        <button class="btn btn-outline-primary">Outline</button>

                        <button class="btn btn-lg">Grand</button>

La navbar Bootstrap est responsive et personnalisable.


                        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

                          <div class="container-fluid">

                            <a class="navbar-brand" href="#">Logo</a>

                            <button class="navbar-toggler">...</button>

                          </div>

                        </nav>

🃏 Cards

Les cards sont des conteneurs flexibles pour afficher du contenu.


                        <div class="card" style="width: 18rem;">

                          <img src="..." class="card-img-top">

                          <div class="card-body">

                            <h5 class="card-title">Titre</h5>

                            <p class="card-text">Contenu...</p>

                            <a href="#" class="btn btn-primary">Bouton</a>

                          </div>

                        </div>

📝 Formulaires

Bootstrap stylise automatiquement les éléments de formulaire.


                        <form>

                          <div class="mb-3">

                            <label class="form-label">Email</label>

                            <input type="email" class="form-control">

                          </div>

                          <button class="btn btn-primary">Envoyer</button>

                        </form>

🪟 Modals

Les modals sont des fenêtres de dialogue qui s'affichent au-dessus du contenu.


                        <!-- Bouton déclencheur -->

                        <button data-bs-toggle="modal" data-bs-target="#myModal">Ouvrir</button>


                        <!-- Modal -->

                        <div class="modal fade" id="myModal">

                          <div class="modal-dialog">

                            <div class="modal-content">...</div>

                          </div>

                        </div>

🛠️ Classes utilitaires

Bootstrap offre des classes utilitaires pour le spacing, display, flexbox, etc.

Spacing (margin et padding)


                        <!-- m = margin, p = padding -->

                        <!-- t/b/s/e = top/bottom/start/end -->

                        <!-- 0-5 = taille (0 à 3rem) -->

                        <div class="mt-3">Margin top 3</div>

                        <div class="p-4">Padding 4</div>

                        <div class="mx-auto">Centré</div>

Display et Flexbox


                        <div class="d-flex justify-content-between">...</div>

                        <div class="d-none d-md-block">Visible sur MD+</div>

🎓 Prochaines étapes

Félicitations ! Vous maîtrisez maintenant les bases de Bootstrap.

✅ Ce que vous avez appris :

Installation et configuration de Bootstrap
Système de grille responsive
Containers et breakpoints
Typographie et couleurs
Boutons et composants
Navbar et navigation
Cards pour le contenu
Formulaires stylisés
Modals interactifs
Classes utilitaires

❮ Précédent: JavaScript Suivant: PHP ❯