Pour changer la largeur d’un élément avec Bootstrap 5 nous allons utiliser la classe .w (width en anglais, largeur en français) accompagné d’un pourcentage.
.w-25 : l’élément occupera 25% de la largeur de la colonne dans laquelle il se trouve.
.w-50 : l’élément occupera 50% de la largeur de la colonne dans laquelle il se trouve.
.w-75 : l’élément occupera 75% de la largeur de la colonne dans laquelle il se trouve.
.w-100 : l’élément occupera 100% de la largeur de la colonne dans laquelle il se trouve.
.w-auto : la largeur de l’élément sera définie automatiquement.
Exemple :
Dans le but de bien différencier les colonnes des éléments, j’ai placé un fond blanc (.bg-light), une marge haute de 3rem (.mt-5), et une bordure droite de couleur noire (.border-end border-dark) sur les colonnes ainsi qu’un fond de couleurs différentes sur chacun des éléments.
Créons 3 colonnes de 12 colonnes de large avec chacune 1 élément (titre h3) de dimension différente.