Dans cette leçon, nous allons apprendre à changer la largeur et la hauteur d’un élément grâce à des classes spécifiques que nous offre Bootstrap 5.
Nous avons vu dans une leçon précédente comment créer des colonnes de largeur différentes dans une même rangée.
Pour rappel, une rangée peut contenir 12 colonnes, 1 colonne peut donc avoir entre 1 et 12 colonnes de large.
Exemple :
Mais qu’en est-il de la largeur d’un élément ?
Comment changer la largeur d’un élément dans Bootstrap 5 ?
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.
Si vous agrandissez ou rétrécissez la taille de l’écran, la largeur des éléments reste fixe en termes de pourcentage.
Il faut bien comprendre que la largeur de l’élément se base sur la largeur de la colonne à laquelle il est intégré.
Exemple :
Prenons une colonne de 12 colonnes de large avec un élément d’une largeur de 50%, puis prenons une autre colonne de seulement 6 colonnes de large avec la aussi un élément de 50% de large.
Comment changer la hauteur d’un élément dans Bootstrap 5 ?
Pour changer la hauteur d’un élément avec Bootstrap 5 nous allons utiliser la classe .h (high en anglais, hauteur en français) accompagnée la aussi d’un pourcentage.
.h-25 : l’élément occupera 25% de la hauteur de la colonne dans laquelle il se trouve.
.h-50 : l’élément occupera 50% de la hauteur de la colonne dans laquelle il se trouve.
.h-75 : l’élément occupera 75% de la hauteur de la colonne dans laquelle il se trouve.
.h-100 : l’élément occupera 100% de la hauteur de la colonne dans laquelle il se trouve.
.h-auto : la hauteur de l’élément sera définie automatiquement.
Exemple :
Pour bien voir les différences de hauteur j’ai rajouté à la rangée (row) la classe vh-100 qui signifie que l’on souhaite que cette rangé occupe 100% de la hauteur du viewport, je vais revenir sur cette classe un plus bas.
Créons une rangée de 4 colonnes, chacune avec des éléments de hauteur différentes.
Là aussi, si vous agrandissez ou rétrécissez l’écran, le pour pourcentage de hauteur reste le même.
Il est bien sûr possible de gérer à la fois la hauteur et la largeur d’un élément en additionnant les classes.
Exemple :
- Colonne 1 : hauteur 75%.
- Colonne 2 : hauteur 50%, largeur 50%.
Comment établir des hauteurs et des largeurs par rapport au viewport ( la fenêtre active du navigateur) ?
Bootstrap 5 offre la possibilité de déterminer la largeur des éléments par rapport au viewport et non à la colonne a l’intérieure de laquelle il se situe.
Le viewport ou fenêtre d’affichage en français est à la partie visible d’une page web. Par exemple si vous consultez un article plus long que la hauteur de page, la zone d’affichage correspondra uniquement à la partie de l’article visible à l’écran.
Le viewport varie donc en fonction :
- De la taille de l’écran.
- L’activation du mode plein écran.
4 classes sont disponibles pour adapter la largeur d’un élément au viewport :
- vw-100 : la largeur de l’élément est égale à celle du viewport ;
- vh-100 : la hauteur de l’élément est égale à celle du viewport ;
- min-vw–100 : la largeur minimale de l’élément est égale à celle du viewport ;
- min-vh-100 : la hauteur minimale de l’élément est égale à celle du viewport.
