Utilitaires

• Documentation
• Questions ou commentaires?

Cette page présente certaines fonctionnalités utilitaires wet-boew, y compris certaines intégrations à partir de Bootstrap 4 telles que: p-0, pl-2, text-white et autres.

Veuillez noter que certaines classes rétroportées de Bootstrap 4 ont été ajustées pour suivre les points d'arrêt de vue de Bootstrap 3.4. Par exemple, la largeur minimale de la petite (sm) vue est 768px dans Bootstrap 3.4, par rapport à 576px dans Boostrap 4.

Sur cette page:

• Alignement
• Arrière-plan
• Schémas de couleurs
• Espacement
• Dimensionnement
• Flexbox
• Listes
• Positionnement
• Tables
• Divers
• Liste descriptive horizontale
• Liste descriptive en ligne

Alignement

text-sm-left

Aligne le text vers la gauche dans la petite vue et plus.

Example pratique

Aligné vers la gauche dans la petite vue et plus

Exemple de code

<p class="text-right text-sm-left">Aligné vers la gauche dans la petite vue et plus</p>

text-sm-right

Aligne le text vers la droite dans la petite vue et plus.

Example pratique

Aligné vers la droite dans la petite vue et plus

Exemple de code

<p class="text-sm-right">Aligné vers la droite dans la petite vue et plus</p>

Arrière-plan

bg-cover

Défini l'image d'arrière-plan afin qu'elle couvre entièrement la taille de la case.

Exemple pratique

Exemple de code

<div class="bg-cover well" data-bgimg="../../demos/tabs/img/investinourfuture.jpg">
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h4 class="mrgn-tp-md">En-tête</h4>
		<p>Paragraphe</p>
	</div>
</div>

bg-center

Défini l'image d'arrière-plan au centre de la case.

Exemple pratique

Exemple de code

<div class="bg-center well" data-bgimg="../../demos/tabs/img/investinourfuture.jpg">
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h4 class="mrgn-tp-md">En-tête</h4>
		<p>Paragraphe</p>
	</div>
</div>

bg-norepeat

Prévient l'image d'arrière-plan de se répéter dans la case.

Exemple pratique

Exemple de code

<div class="bg-norepeat well" data-bgimg="../../demos/tabs/img/investinourfuture.jpg">
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h4 class="mrgn-tp-md">En-tête</h4>
		<p>Paragraphe</p>
	</div>
</div>

bg-darker

Défini un arrère-plan noir à un élément.

Exemple pratique

Exemple de code

<div class="bg-cover well" data-bgimg="../../demos/tabs/img/investinourfuture.jpg">
	<div class="well mrgn-tp-md mrgn-bttm-md bg-darker text-white">
		<h4 class="mrgn-tp-md">En-tête</h4>
		<p>Paragraphe</p>
	</div>
</div>

bg-dark

Défini un arrère-plan foncé à un élément.

Exemple pratique

Exemple de code

<div class="bg-cover well" data-bgimg="../../demos/tabs/img/investinourfuture.jpg">
	<div class="well mrgn-tp-md mrgn-bttm-md bg-dark text-white">
		<h4 class="mrgn-tp-md">En-tête</h4>
		<p>Paragraphe</p>
	</div>
</div>
<button type="button" class="btn text-white bg-dark">Bouton</button>

Schémas de couleurs

text-white

Définir le texte en blanc. Fonctionne conjointement avec des arrière-plans plus sombres.

Exemple pratique

Suspendisse faucibus nisl at consectetur. Lorem ipsum dolor sit amet, consectetur.

Exemple de code

<p class="bg-darker text-white">Suspendisse faucibus nisl at consectetur. Lorem ipsum <a href="#" class="text-white">dolor sit amet, consectetur.</a></p></p>

Espacement

p-0

Défini un remplissage de 0px.

Exemple pratique

Suspendisse faucibus nisl at consectetur.

Exemple de code

<p class="p-0 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

p-sm-3

Défini un remplissage de 15px dans la petite vue et plus.

Exemple pratique

Suspendisse faucibus nisl at consectetur.

Exemple de code

<p class="p-sm-3 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

pl-2

Défini un remplissage à gauche de 5px.

Exemple pratique

Suspendisse faucibus nisl at consectetur.

Exemple de code

<p class="pl-2 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

px-2

Défini un remplissage à gauche et à droite de 5px.

Exemple pratique

Suspendisse faucibus nisl at consectetur.

Exemple de code

<p class="px-2 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

px-sm-3

Défini un remplissage à gauche et à droite de 15px dans la petite vue et plus.

Exemple pratique

Suspendisse faucibus nisl at consectetur.

Exemple de code

<p class="px-sm-3 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

pr-2

Défini un remplissage à droite de 5px.

Exemple pratique

Suspendisse faucibus nisl at consectetur.

Exemple de code

<p class="pr-2 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

pr-sm-3

Défini un remplissage à droite de 15px dans la petite vue et plus.

Exemple pratique

Suspendisse faucibus nisl at consectetur.

Exemple de code

<p class="pr-sm-3 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

pt-4

Défini un remplissage au-dessus de 30px.

Exemple pratique

Suspendisse faucibus nisl at consectetur.

Exemple de code

<p class="pt-4 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

py-4

Défini un remplissage au-dessus et en-dessous de 30px.

Exemple pratique

Suspendisse faucibus nisl at consectetur.

Exemple de code

<p class="py-4 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

pb-4

Défini un remplissage en-dessous de 30px.

Exemple pratique

Suspendisse faucibus nisl at consectetur.

Exemple de code

<p class="pb-4 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

mb-sm-5

Défini une marge en-dessous de 50px dans la petite vue et plus.

Exemple pratique

Suspendisse faucibus nisl at consectetur.

Exemple de code

<p class="mb-sm-5 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

mt-auto

Défini une marge au-dessus automatique. Lorsque utilisé conjointement avec "flex", l'élément ira se coller au bas de son conteneur.

Exemple pratique

Veuillez tester sur tablette ou ordinateur de bureau afin d'obtenir l'effet escompté de cet utilitaire.

Exemple de code

<div class="row wb-eqht-grd">
	<div class="col-xs-6">
		<p class="mt-auto mrgn-bttm-0 bg-primary">Exemple de texte.</p>
	</div>
	<div class="col-xs-6">
			<p class="mrgn-bttm-0 bg-primary">Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.<span class="hidden-xs hidden-sm"> Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</span></p>
	</div>
</div>

Dimensionnement

h-100

Défini une grandeur de 100 % sur l'élément. Lorsque utilisé dans le contexte de "flex", cela forcera l'élément a avoir la grandeur de son parent.

Exemple pratique

Veuillez tester sur tablette ou ordinateur de bureau afin d'obtenir l'effet escompté de cet utilitaire.

Exemple de code

<div class="row wb-eqht-grd">
	<div class="col-xs-6">
		<p class="h-100 mrgn-bttm-0 bg-primary">Exemple de texte.</p>
	</div>
	<div class="col-xs-6">
			<p class="mrgn-bttm-0 bg-primary">Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.<span class="hidden-xs hidden-sm"> Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</span></p>
	</div>
</div>

Flexbox

d-flex

Défini un élément en tant que conteneur "flex" et change ses enfants directs en tant qu'éléments "flex".

Exemple pratique

Exemple de code

<div class="d-flex">
	<p class="well">Élément flex</p>
	<p class="well">Élément flex</p>
</div>

d-sm-flex

Défini un élément en tant que conteneur "flex" et change ses enfants directs en tant qu'éléments "flex". À utiliser lorsque vous souhaitez que le style soit appliqué uniquement pour les points d'arrêt sm et plus.

Exemple pratique

Exemple de code

<div class="d-sm-flex">
	<p class="well">Élément flex</p>
	<p class="well">Élément flex</p>
</div>

flex-sm-wrap

Permet les éléments flex d'un conteneur « flexbox » de retourner à travers plusieurs lignes dans la petite vue et plus. Utile pour les dispositions en grille.

Example pratique

Exemple de code

<div class="row d-sm-flex flex-sm-wrap">
	<div class="col-sm-12">
		<p class="well"><code>col-xs-12</code></p>
	</div>
	<div class="col-sm-12">
		<p class="well"><code>col-xs-12</code></p>
	</div>
</div>

flex-column

Défini la direction d'un conteneur "flex" à la vertical au lieu de l'horizontal.

Exemple pratique

Exemple de code

<div class="d-flex flex-column">
	<p class="well">Élément flex</p>
	<p class="well">Élément flex</p>
</div>

align-self-center

Aligne un élément au centre verticalement. Cet utilitaire doit être utilisé conjointement avec l'utilitaire d-flex.

Exemple pratique

Paragraphe centré verticalement avec l'image à côté.

Exemple de code

<div class="d-flex">
	<img src="https://via.placeholder.com/80" alt="" class="d-flex align-self-center mrgn-rght-md" />
	<p class="d-flex align-self-center mrgn-lft-md">Paragraphe centré verticalement avec l'image à côté.</p>
</div>

align-self-end

Aligne un élément au bas. Cet utilitaire doit être utilisé conjointement avec l'utilitaire d-flex.

Exemple pratique

Paragraphe placé au bas verticalement avec l'image à côté.

Exemple de code

<div class="d-flex">
	<img src="https://via.placeholder.com/80" alt="" class="d-flex mrgn-rght-md" />
	<p class="d-flex align-self-end mrgn-lft-md">Paragraphe placé au bas verticalement avec l'image à côté.</p>
</div>

align-items-center

Aligner au centre les éléments flex d'un conteneur flexbox. Utile pour l'alignement au centre.

Example pratique

Exemple de code

<div class="row d-flex align-items-center">
	<div class="col-xs-4">
		<p class="well">Ligne 1<br />Ligne 2<br />Ligne 3<br />Ligne 4<br />Ligne 5</p>
	</div>
	<div class="col-xs-4">
		<p class="well">Ligne 1<br />Ligne 2<br />Ligne 3</p>
	</div>
	<div class="col-xs-4">
		<p class="well">Ligne 1</p>
	</div>
</div>

align-items-sm-center

Aligner au centre les éléments flex d'un conteneur flexbox. Utile pour l'alignement au centre. À utiliser lorsque vous souhaitez que le style soit appliqué uniquement pour les points d'arrêt sm et plus.

Example pratique

Exemple de code

<div class="row d-sm-flex align-items-sm-center">
	<div class="col-xs-4">
		<p class="well">Ligne 1<br />Ligne 2<br />Ligne 3<br />Ligne 4<br />Ligne 5</p>
	</div>
	<div class="col-xs-4">
		<p class="well">Ligne 1<br />Ligne 2<br />Ligne 3</p>
	</div>
	<div class="col-xs-4">
		<p class="well">Ligne 1</p>
	</div>
</div>

Listes

Colonnes de liste (colcount-*-*)

Répend une liste à travers 2, 3 ou 4 colonnes.

Puisque les colonnes sont semblables à des grilles, elles sont assujetties aux mêmes points d'arrêt que les grilles.

Classes disponibles

• 2 colonnes :
  • colcount-xxs-2, colcount-xs-2, colcount-sm-2, colcount-md-2, colcount-lg-2, colcount-xl-2
• 3 colonnes :
  • colcount-xxs-3, colcount-xs-3, colcount-sm-3, colcount-md-3, colcount-lg-3, colcount-xl-3
• 4 colonnes :
  • colcount-xxs-4, colcount-xs-4, colcount-sm-4, colcount-md-4, colcount-lg-4, colcount-xl-4

Liste sans ordre

Exemple pratique

• Élément 1
  Ligne 2
  Ligne 3
• Élément 2
  Ligne 2
  Ligne 3
• Élément 3
• Élément 4
  Ligne 2
  Ligne 3
• Élément 5
  Ligne 2
  Ligne 3
• Élément 6
  Ligne 2
• Élément 7
  Ligne 2
• Élément 8

Exemple de code

<ul class="colcount-sm-2 colcount-md-3 colcount-lg-4">
	<li>Élément 1<br>Ligne 2<br>Ligne 3</li>
	<li>Élément 2<br>Ligne 2<br>Ligne 3</li>
	<li>Élément 3</li>
	<li>Élément 4<br>Ligne 2<br>Ligne 3</li>
	<li>Élément 5<br>Ligne 2<br>Ligne 3</li>
	<li>Élément 6<br>Ligne 2</li>
	<li>Élément 7<br>Ligne 2</li>
	<li>Élément 8</li>
</ul>

Liste de descriptions

Exemple pratique

Terme 1

Description

Terme 2

Description
Ligne 2
Ligne 3

Terme 3

Description
Ligne 2
Ligne 3

Terme 4

Description
Ligne 2

Terme 5

Description
Ligne 2

Terme 6

Description

Exemple de code

<dl class="colcount-sm-2 colcount-md-3 colcount-lg-4">
	<div>
		<dt>Terme 1</dt>
		<dd>Description</dd>
	</div>
	<div>
		<dt>Terme 2</dt>
		<dd>Description<br>Ligne 2<br>Ligne 3</dd>
	</div>
	<div>
		<dt>Terme 3</dt>
		<dd>Description<br>Ligne 2<br>Ligne 3</dd>
	</div>
	<div>
		<dt>Terme 4</dt>
		<dd>Description<br>Ligne 2</dd>
	</div>
	<div>
		<dt>Terme 5</dt>
		<dd>Description<br>Ligne 2</dd>
	</div>
	<div>
		<dt>Terme 6</dt>
		<dd>Description</dd>
	</div>
</dl>

colcount-no-break

Empêche les éléments de liste de se séparer à travers plusieurs colonnes de liste.

Liste sans ordre

Exemple pratique

• Élément 1
  Ligne 2
  Ligne 3
• Élément 2
  Ligne 2
  Ligne 3
• Élément 3
• Élément 4
  Ligne 2
  Ligne 3
• Élément 5
  Ligne 2
  Ligne 3
• Élément 6
  Ligne 2
• Élément 7
  Ligne 2
• Élément 8

Exemple de code

<ul class="colcount-sm-2 colcount-md-3 colcount-lg-4 colcount-no-break">
	<li>Élément 1<br>Ligne 2<br>Ligne 3</li>
	<li>Élément 2<br>Ligne 2<br>Ligne 3</li>
	<li>Élément 3</li>
	<li>Élément 4<br>Ligne 2<br>Ligne 3</li>
	<li>Élément 5<br>Ligne 2<br>Ligne 3</li>
	<li>Élément 6<br>Ligne 2</li>
	<li>Élément 7<br>Ligne 2</li>
	<li>Élément 8</li>
</ul>

Liste de descriptions

Exemple pratique

Terme 1

Description

Terme 2

Description
Ligne 2
Ligne 3

Terme 3

Description
Ligne 2
Ligne 3

Terme 4

Description
Ligne 2

Terme 5

Description
Ligne 2

Terme 6

Description

Exemple de code

<dl class="colcount-sm-2 colcount-md-3 colcount-lg-4 colcount-no-break">
	<div>
		<dt>Terme 1</dt>
		<dd>Description</dd>
	</div>
	<div>
		<dt>Terme 2</dt>
		<dd>Description<br>Ligne 2<br>Ligne 3</dd>
	</div>
	<div>
		<dt>Terme 3</dt>
		<dd>Description<br>Ligne 2<br>Ligne 3</dd>
	</div>
	<div>
		<dt>Terme 4</dt>
		<dd>Description<br>Ligne 2</dd>
	</div>
	<div>
		<dt>Terme 5</dt>
		<dd>Description<br>Ligne 2</dd>
	</div>
	<div>
		<dt>Terme 6</dt>
		<dd>Description</dd>
	</div>
</dl>

Positionnement

position-relative

Défini une position relative pour un élément. Ceci a été créée afin de supporter l'utilitaire stretched-link. Afin d'obtenir un meilleur effet visuel, référez vous à la section de l'utilitaire 'streched-link' ci-desous.

Exemple pratique

Ceci est un paragraphe relativement positionné.

Exemple de code

<p class="position-relative">Ceci est un paragraphe relativement positionné.</p>

Tables

table-responsive

Non porté de, mais en ligne avec Bootstrap 4: renvoie le texte automatiquement à la ligne suivante dans n'importe quelle fenêtre d'affichage incluant les petits appareils (sous 768px)

Exemple pratique

Exemple de code

<div class="table-responsive">
	<!-- Tableau ici -->
</div>

Divers

max-content

Limite la largeur d'un élément à la largeur de son contenu le plus grand.

Exemple pratique

Exemple de code

<details class="max-content">
	<summary>Liste d'éléments</summary>
	<ul class="list-unstyled mrgn-bttm-0 mrgn-tp-sm">
		<li><a href="#">Lorem ipsum</a></li>
		<li><a href="#">Proin porta vehicula</a></li>
		<li><a href="#">consectetur adipiscing elitDuis porttitor fermentum semper</a></li>
		<li><a href="#">consectetur adipiscing elit</a></li>
	</ul>
</details>

stretched-link

Agrandit la zone cliquable d'un hyperlien jusqu'à son plus proche parent.

Exemple pratique

[Lien hypertexte]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[Lien hypertexte]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[Lien hypertexte]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Exemple de code

<div class="row">
	<div class="col-md-4">
		<img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
		<h3 class="h5"><a href="#" class="stretched-link">[Lien hypertexte]</a></h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="col-md-4">
		<div class="panel panel-default position-relative">
			<div class="panel-body">
				<img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
				<h3 class="h5"><a href="#" class="stretched-link">[Lien hypertexte]</a></h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="well position-relative">
			<img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
			<h3 class="h5"><a href="#" class="stretched-link">[Lien hypertexte]</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
	</div>
</div>

test-textSpacing

Exemple de code

<body class="test-textSpacing" vocab="http://schema.org/" typeof="WebPage" resource="#wb-webpage" class="home page-type-nav ">
...
</body>

Liste descriptive horizontale

Renvoi à la ligne

Ceci est la mise à l'essaie d'un cas d'utilisation spécifique où le mot est tronqué dans le titre de la description lorsque ce dernier est long et prend toute l'espace disponible.

Titre de la description

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Un long mot : anticonstitutionnellement

Sed vitae mattis metus. Donec vel nisi lobortis, pretium ante in, porta odio. Duis blandit turpis neque, in interdum mi cursus nec. Cras pharetra ipsum at felis venenatis pellentesque. Vivamus facilisis sollicitudin enim, ac condimentum orci. Aenean tempor elit sit amet tellus gravida, et dignissim magna mollis. Vivamus rhoncus ligula nulla, sit amet maximus sem rutrum scelerisque. Etiam ac lacus rutrum, placerat orci et, dignissim arcu. Praesent eu vulputate tortor, eu porta neque. Fusce commodo tempus ipsum ac rhoncus. Phasellus laoreet aliquam nulla non accumsan. Etiam eu lacinia augue, eget posuere lectus. Curabitur ultricies dolor ante, vel elementum nulla pellentesque nec.

Quelques mots afin de remplir de l'espace

Quisque tristique dui in ante mattis, nec commodo tortor eleifend.

Si le mot le plus long est en majuscule, certains navigateurs peuvent ne pas afficher de trait d'union.

Si vous souhaitez définir l'endroit où il y aura une opportunité de créer un trait d'union pour faire un renvoie à la ligne en cas de manque d'espace, vous pouvez utiliser l'entité du trait d'union souple (­).

Largeur maximal de la colonne des termes

Ajouter la classe CSS dt-max avec la classe CSS dl-horizontal afin que le plus long mot dans la colonne des termes (l'élément <dt>) détermine la largeur pour l'ensemble des termes.

Titre du terme

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Un long mot : anticonstitutionnellement

Sed vitae mattis metus. Donec vel nisi lobortis, pretium ante in, porta odio. Duis blandit turpis neque, in interdum mi cursus nec. Cras pharetra ipsum at felis venenatis pellentesque. Vivamus facilisis sollicitudin enim, ac condimentum orci. Aenean tempor elit sit amet tellus gravida, et dignissim magna mollis. Vivamus rhoncus ligula nulla, sit amet maximus sem rutrum scelerisque. Etiam ac lacus rutrum, placerat orci et, dignissim arcu. Praesent eu vulputate tortor, eu porta neque. Fusce commodo tempus ipsum ac rhoncus. Phasellus laoreet aliquam nulla non accumsan. Etiam eu lacinia augue, eget posuere lectus. Curabitur ultricies dolor ante, vel elementum nulla pellentesque nec.

Quelques mots de remplissage qui prennent de l'espace

Quisque tristique dui in ante mattis, nec commodo tortor eleifend.

Liste descriptive en ligne

List descriptive en ligne utilisée pour afficher des termes et descriptions courts.

Terme :

Description courte

Terme :

Description courte

Terme :

Description courte

Terme :

Description courte

Terme :

Description courte

Date de modification :

2024-03-25