Gérer les dimensions des éléments avec Bootstrap

Les classes Bootstrap ne nous permettent pas d’avoir un contrôle total sur la taille des différents éléments d’une page. Cela s’explique en partie par le fait que le système des grilles permet déjà de créer des zones pour les éléments.

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.

Laisser un commentaire