La taille des colonnes COLONNES:Taille

1. Appliquer une largeur aux colonnes COLONNES:Largeur

Les exemples de cette section sont à télécharger dans le dossier nommé 12-Utilitaires-08.

Vous pouvez parfaitement appliquer une largeur à vos colonnes dans les lignes où elles sont insérées. Cette largeur des colonnes sera relative à la largeur de l’élément parent. Vous avez accès à cinq largeurs prédéfinies, avec cinq classes : 25 % (w-25), 50 % (w-50), 75 % (w-75), 100 % (w-100) et auto (w-auto) pour un ajustement automatique.

Voici le code utilisé pour ces exemples :

<div class="d-grid gap-2 border"> 
  <div class="w-25 bg-light border">25%. Donec ullamcorper nulla...</div> 
  <div class="w-50 bg-light border">50%. Donec ullamcorper nulla...</div> 
  <div class="w-75 bg-light border">75%. Donec ullamcorper nulla...</div> 
  <div class="w-100 bg-light border">100%. Donec ullamcorper nulla...</div> 
  <div class="w-auto bg-light border">auto. Donec ullamcorper nulla...</div> 
</div> 

Voici l’affichage obtenu :

2. Appliquer une hauteur aux colonnes COLONNES:Hauteur

Sur le même principe, vous pouvez appliquer une hauteur prédéfinie aux colonnes dans les lignes. Les classes à utiliser sont : h-25, h-50, h-75, h-100...