BOOTSTRAP 5
-----Conteneurs
container -->classe fournit un conteneur réactif à largeur fixe
container-fluidclasse -->fournit un conteneur pleine largeur , couvrant toute la
largeur de la fenêtre d'affichage
container pt-5 --> pt-5 signifie "ajouter un grand rembourrage supérieur
-----Grille
col-6 --> grille de Bootstrap est construit avec flexbox et permet jusqu'à 12
colonnes sur la page
exemple : créez une ligne ( <div class="row">). Ensuite, ajoutez le nombre de
colonnes souhaité
<div class="col-5"></div>
<div class="col-7"></div>
------Typographie
h1 --> Bootstrap 5 styles d'en-têtes HTML (<h1>à<h6>) avec un poids de police plus
gras et une taille de police réactive.
exemple <p class=".h1"></p>
.text-center
.text-uppercase
.text-decoration-none ...
-----couleurs
Les classes pour les couleurs de texte sont : .text-muted, .text-primary, .text-
success, .text-info, .text-warning,
.text-danger, .text-secondary, .text-white, .text-dark, .text-body
Vous pouvez également ajouter 50 % d'opacité pour le texte noir ou blanc
avec .text-black-50ou :.text-white-50
Les classes pour les couleurs d'arrière-plan sont : .bg-primary, .bg-success, .bg-
info, .bg-warning, .bg-danger,
.bg-secondaryet ,.bg-dark.bg-light
----Tableux
La .table classe ajoute un style de base à une table
La .table-striped classe ajoute des rayures zébrées à un tableau
La .table-bordered classe ajoute des bordures sur tous les côtés du tableau et des
cellules
La .table-hover classe ajoute un effet de survol (couleur de fond grise) sur les
lignes du tableau
La .table-dark classe ajoute un fond noir au tableau
La .table-borderless classe supprime les bordures du tableau
.table-primary Bleu : Indique une action importante
.table-success Vert : Indique une action réussie ou positive
.table-danger Rouge : Indique une action dangereuse ou potentiellement négative
.table-info Bleu clair : Indique un changement informatif neutre ou une action
.table-warning Orange : indique un avertissement qui pourrait nécessiter votre
attention
.table-active Gris : applique la couleur de survol à la ligne ou à la cellule
du tableau
.table-secondary Gris : Indique une action légèrement moins importante
.table-light Table gris clair ou fond de rangée de table
.table-dark Table gris foncé ou fond de rangée de table
La .table-sm classe rend la table plus petite en coupant de moitié le rembourrage
des cellules
La .table-responsive classe ajoute une barre de défilement au tableau en cas de
besoin (lorsqu'il est trop grand horizontalement)
---image
La .rounded classe ajoute des coins arrondis à une image
La .rounded-circle classe façonne l'image en cercle
La .img-thumbnail classe façonne l'image en vignette (encadrée)
Faire flotter une image à gauche avec la .float-start classe ou à droite
avec .float-end
Centrez une image en ajoutant les classes utilitaires .mx-auto(margin:auto) et .d-
block(display:block) à l'image
exemple : <img src="paris.jpg" class="mx-auto d-block">
L'image s'adaptera alors parfaitement à l'élément parent, La .img-fluidclasse
s'applique max-width: 100%;et height: auto;
