Couleur (Premier plan/Arrière-plan)

Cette page présente les fonctionnalités de l'utilitaire wet-boew, y compris certaines intégrations de Bootstrap 4 telles que: bg-primary, text-center, text-white et d'autres.

Veuillez noter que certaines classes Bootstrap 4 rétroportées 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 vue (sm) est de 768px dans Bootstrap 3.4, par opposition à 576px dans Bootstrap 4.

Sur cette page page:

• WET Override
• Bootstrap
• GCWeb

WET Override

text-white

Définie la couleur de police à blanche

Exemple

Paragraphe

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lien

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bouton

Exemple de code

<h5>Paragraphe</h5>
<p class="bg-dark text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h5>Lien</h5>
<p class="bg-dark"><a class="text-white" href="#"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></p>
<h5>Bouton</h5>
<button type="button" class="btn bg-dark text-white"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</button>

text-sm-left

Alignez le texte à gauche en petite vue et au-dessus.

Exemple

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Exemple de code

<p class="text-right text-sm-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

text-sm-right

Alignez le texte à droite en petite vue et au-dessus.

Exemple

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Exemple de code

<p class="text-sm-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Bootstrap

Couleurs d'arrière-plan

Définie la couleur de l'arrière-plan avec une des couleurs Bootstrap

Exemple

Exemple de code

<div class="well">
	<div class="bg-primary mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Primaire</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="bg-success mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Succès</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="bg-info mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Info</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="bg-warning mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Avertissement</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="bg-danger mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Danger</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
</div>

Couleur du texte

Définie la couleur du texte avec une des couleurs Bootstrap

Exemple

Exemple de code

<div class="well">
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">En sourdine</h5>
		<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Primaire</h5>
		<p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Succès</h5>
		<p class="text-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Info</h5>
		<p class="text-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Avertissement</h5>
		<p class="text-warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Danger</h5>
		<p class="text-danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
</div>

Alignement du texte

Aligner le texte sur la page.

Exemple

Exemple de code

<div class="well">
	<div class="well mrgn-tp-md mrgn-bttm-md text-left">
		<h5 class="mrgn-tp-md">Aligné à gauche</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="well mrgn-tp-md mrgn-bttm-md text-right">
		<h5 class="mrgn-tp-md">Aligné à droite</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="well mrgn-tp-md mrgn-bttm-md text-center">
		<h5 class="mrgn-tp-md">Aligné au centre</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="well mrgn-tp-md mrgn-bttm-md text-justify">
		<h5 class="mrgn-tp-md">Aligné-justifier</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="well mrgn-tp-md mrgn-bttm-md text-nowrap" style="width: 8rem; border: 2px solid black">
		<h5 class="mrgn-tp-md">Aucune enveloppement</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
</div>

GCWeb

bg-cover

Définir l'image d'arrière-plan pour couvrir entièrement la taille de la boîte.

Exemple

Exemple de code

<div class="bg-cover well" data-bgimg="https://wet-boew.github.io/wet-boew/demos/tabs/img/investinourfuture.jpg">
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Titre</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
	</div>
</div>

bg-center

Définissez l'image d'arrière-plan au centre du conteneur.

Exemple

Exemple de code

<div class="bg-center well" data-bgimg="https://wet-boew.github.io/wet-boew/demos/tabs/img/investinourfuture.jpg">
	<div class="well mrgn-tp-md mrgn-bttm-md opct-60">
		<h5 class="mrgn-tp-md">Titre</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
	</div>
</div>

bg-norepeat

Empêche la répétition de l'image d'arrière-plan dans le conteneur.

Exemple

Exemple de code

<div class="bg-norepeat well" data-bgimg="https://wet-boew.github.io/wet-boew/demos/tabs/img/investinourfuture.jpg">
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Titre</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
	</div>
	</div>

bg-gctheme

définir l'arrière-plan du gctheme

Exemple

Exemple de code

<div class="bg-gctheme text-white well mrgn-tp-md mrgn-bttm-md">
			<h5 class="mrgn-tp-md">Titre</h5>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
	</div>

bg-darker

Définissez un arrière-plan noir sur un élément.

Exemple

Exemple de code

<div class="well mrgn-tp-md mrgn-bttm-md bg-darker text-white">
	<h5 class="mrgn-tp-md">Titre</h5>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
	</div>

bg-dark

Définissez un arrière-plan sombre sur un élément.

Exemple

Exemple de code

<div class="well mrgn-tp-md mrgn-bttm-md bg-dark text-white">
	<h5 class="mrgn-tp-md">Titre</h5>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
	</div>