On dispose cependant de quelques classes qui vont nous permettre de définir des tailles pour nos éléments, soit relativement à leur parent, soit relativement au viewport (fenêtre active).
Définir la taille d’un élément relativement à celle de son parent
Bootstrap va déjà nous permettre de définir la taille de nos éléments en fonction de celle de leur parent.
Pour modifier la largeur d’un élément, on va pouvoir utiliser les classes suivantes :
.w-25
: l’élément a une largeur égale à 25% de celle de son parent ;.w-50
: l’élément a une largeur égale à 50% de celle de son parent ;.w-75
: l’élément a une largeur égale à 75% de celle de son parent ;.w-100
: l’élément a une largeur égale à celle de son parent ;.w-auto
: la largeur de l’élément est définie automatiquement.
Pour modifier la hauteur d’un élément, on utilisera les classes suivantes :
.h-25
: l’élément a une hauteur égale à 25% de celle de son parent ;.h-50
: l’élément a une hauteur égale à 50% de celle de son parent ;.h-75
: l’élément a une hauteur égale à 75% de celle de son parent ;.h-100
: l’élément a une hauteur égale à celle de son parent ;.h-auto
: la hauteur de l’élément est définie automatiquement.
See the Pen
Bootstrap 2.4.1 by Pierre (@pierregiraud)
on CodePen.
Définir la taille d’un élément relativement au viewport
Bootstrap nous permet encore de définir la taille de nos éléments en fonction du viewport. Le viewport correspond à la fenêtre active.
Nous allons ici être limités aux classes suivantes :
.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.
See the Pen
Bootstrap 2.4.2 by Pierre (@pierregiraud)
on CodePen.