🍭 Utiliser la librairie CSS Bootstrap

Dernière mise à jour : 30 Jun 2024

Code HTML à insérer entre les balises <head> et </head> pour charger Bootstrap dans une page HTML

Pour utiliser Bootstrap CSS, vous devez d’abord inclure le fichier CSS de Bootstrap dans votre projet. Vous pouvez les télécharger depuis le site web de Bootstrap ou les inclure en utilisant un CDN, comme ceci :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

Comment utiliser le mode grille avec Bootstrap CSS ?

Le mode grille de Bootstrap CSS est un système de grille de 12 colonnes qui permet de structurer et d’organiser le contenu d’une page web.
Pour utiliser le mode grille avec Bootstrap, vous pouvez suivre les étapes suivantes :

  1. Incluez les fichiers CSS et JavaScript de Bootstrap dans votre projet en utilisant les balises link et script appropriées.

  2. Dans votre code HTML, créez une structure de grille en utilisant les classes de Bootstrap .container, .row et .col-*. Par exemple, si vous souhaitez créer une grille de trois colonnes, vous pouvez utiliser le code suivant :

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

Pour chaque colonne de votre grille, utilisez la classe .col-* en spécifiant une taille de colonne.