Utilitaires

Bootstrap est truffés de classes utilitaires permettant de simplifier/accélérer le développement. Afin de vous familiariser avec ce concept, nous allons examiner quelques-unes d'entre elles.

Image responsive

Comme son nom le laisse sous-entendre, la classe .img-fluid sert à rendre une image fluid/responsive en lui appliquant les propriétés CSS suivantes:

max-width: 100%; height: auto;

La propriété max-width fait en sorte que l'image affichera selon sa taille normale, à moins que l'espace soit insuffisant. Dans ce cas, elle sera limitée à la largeur disponible. De son côté, height: auto; s'assure que l'image ne soit jamais déformée.

Pour activer cette classe, il suffit de l'ajouter à une image ainsi:

<img src="image.jpg" class="img-fluid"> .img-fluid Alignements de texte

Pour aligner un texte à gauche, au centre ou à droite, il est possible d'utiliser les classes utilitaires suivantes:

  • text-start à gauche
  • text-center au centre
  • text-end à droite

Toutes ces options d'alignements sont compatibles avec l'ajout d'un breakpoint afin d'indiquer quand leur comportement devrait devenir actif.

Par exemple, pour centrer un texte lorsque le breakpoint lg est atteint, il serait possible de faire:

<p class="text-lg-center">Texte centré en lg</p> .text-... Display

Pour donner une valeur de display particulière à un élément, il est possible d'utiliser les classes utilitaires suivantes:

  • d-block pour display block.
  • d-inline pour display inline.
  • d-inline-block pour display inline-block.
  • d-flex pour display flex.
  • d-none pour display none.
  • etc.

Toutes ces options de display sont compatibles avec l'ajout d'un breakpoint afin d'indiquer le moment où l'affichage un affichage devrait changer.

Par exemple, pour qu'un élément soit invisible par défaut, mais devienne en display: block lorsque le breakpoint lg est atteint, il serait possible de faire:

<div class="d-none d-lg-block">...</div> .d-... Display: Flex

Comme on a vu avec le système de grille, les rangées pouvaient accueillir des classes utilitaires référent au système de flexbox afin de permettre d'aligner leur balises enfants, les columns. Vous vous rappelez certainement de cette formulation pour centrer toutes les colonnes dans leurs rangée en ajoutant la classe.justify-content-center à la balise contantnt la classe .row?

<div class="container"> <div class="row justify-content-center"> <div class="col-2"></div> <div class="col-2"></div> </div> </div>

Et bien, Bootstrap nous offre une panoplie de classes utilitaires pour nous permettre de placer de nos éléments suivant le système Flexbox.

Tel qu'expliqué précédemment, vous devez ajouter la classe d-flex sur la balise parent des éléments à positionner.

Balise parent

Liste non-exhaustive des classes que vous pouvez utiliser sur la balise parent qui contient des balises enfants à positionner:

  • .d-flex
  • .flex-row : référence à la propriété css flex-direction
  • .flex-column : référence à la propriété css flex-direction
  • .justify-content-center
  • .justify-content-end
  • .justify-content-between
  • .align-items-start
  • .align-items-center
  • .align-items-stretch
  • flex-wrap
  • flex-nowrap

Balise enfant

Liste non-exhaustive des classes que vous pouvez utiliser sur la balises enfants à positionner dans l'espace:

  • .align-self-start
  • .align-self-center
  • .flex-grow-1
  • .flex-grow-2
  • .flex-shrink-1

Sachez que vous pouvez toujours ajouter les breakpoints à ces classes afiin de faire des exception de positionnement dépendant de la largeur de l'écran. L'exemple suivant permettra d'afficher par défaut, sur petit écran, A, B et C un en dessous de l'autre grace à .flex-column, et à partir du breakpoint >md, ils s'afficheront un à côté de l'autre sur une même rangée, grâce à .flex-md-row.

<div class="d-flex flex-column flex-md-row"> <div class="w-25">A</div> <div class="w-25">B</div> <div class="w-25">C</div> </div> flex Espacement (spacing)

Bootstrap comprend un large éventail de classes utilitaires de marge (margin), de remplissage (padding) pour modifier l'apparence d'un élément.

Où la propriété est l'une des :

  • m - pour les classes qui modifient la marge margin
  • p - pour les classes qui modifient le remplissage padding

Où le côté est l'une des :

  • t - pour les classes qui modifient margin-top ou padding-top
  • b- pour les classes qui modifient margin-bottom ou padding-bottom
  • s - (start) - pour les classes qui modifient margin-left ou padding-left in LTR, margin-right or padding-right in RTL
  • e - (end) - pour les classes qui modifient margin-right ou padding-right in LTR, margin-left or padding-left in RTL
  • x - pour les classes qui modifient à la fois *-left ET *-right
  • y - pour les classes qui modifient à la fois *-top ET *-bottom
  • blank - pour les classes qui modifient margin ou padding sur tous les 4 côté de l'élément.

Où la dimension est l'une des :

  • 0 - pour les classes qui éliminent margin ou padding en le fixant à 0
  • 1 - pour les classes qui modifient margin ou padding à $spacer * .25
  • 2 - pour les classes qui modifient code>margin ou padding à $spacer * .5
  • 3 - pour les classes qui modifient margin ou padding à $spacer
  • 4 - pour les classes qui modifient margin ou padding à $spacer * 1.5
  • 5 - pour les classes qui modifient margin ou padding à $spacer * 3
  • auto - pour les classes qui modifient margin ou padding à auto

Exemples

<h1 class="mt-0">Abc</h1>

Équivaut à appliquer le css margin-top: 0;

<div class="px-3">Abc</div>

Équivaut à appliquer le css padding-left: 1rem; padding-right: 1rem;


Spacing