Affichage

Cette page présente des fonctionnalités utilitaires d'affichage de Bootstrap, y compris certaines intégrations de wet-boew pour la bascule du contenu.

Flottant

Exemple fonctionnel de .clearfixBootstrap 3

Exemple de code

< class="well">
  <div class="pull-left bg-info">( Row 1, Colonne 1 )</div>
  <div class="pull-left bg-info">( Row 1, Colonne 2 )</div>
  <div class="pull-left bg-info">( Row 1, Colonne 3 )</div>
  <!-- Ajouter la classe clearfix pour effacer les éléments flottants -->
  <div class="clearfix">
  <div class="pull-left bg-info">Row 2, Colonne 1</div>
  <div class="pull-left bg-info">Row 2, Colonne 2</div>
  <div class="pull-left bg-info">Row 2, Colonne 3</div>
  <div class="pull-left bg-info">Row 2, Colonne 4</div>
</div>

Exemple fonctionnel de de la classe Bootstrap 3 .center-block

Exemple de code

<div class="well">
	<div class="center-block well bg-darker text-white">
		Cet élément est centré horizontalement dans son conteneur parent.
	</div>
</div>

Exemple fonctionnel de de la classe Bootstrap 3 .pull-right

Exemple de code

<div class="well">
	<div class="pull-right well">
		Cet élément est flottant à droite dans son conteneur parent.
	</div>
</div>

Exemple fonctionnel de de la classe Bootstrap 3 .pull-left

Exemple de code

<div class="well">
	<div class="pull-left well">
		Cet élément est flottant à gauche dans son conteneur parent.
	</div>
</div><div class="clearfix"> </div>

Effacement

Exemple fonctionnel de de la classe .clr-lft-lg

Exemple de code

<div class="well">
	<div class="clr-lft-lg well">
		Cet élément efface les éléments flottants à gauche sur les grands écrans (lg) dans son conteneur parent.
	</div>
</div>

Exemple fonctionnel de de la classe .clr-lft-md

Exemple de code

<div class="well">
	<div class="clr-lft-md well">
		Cet élément efface les éléments flottants à gauche sur les écrans moyens (md) dans son conteneur parent.
	</div>
</div>

Exemple fonctionnel de de la classe .clr-rght-lg

Exemple de code

<div class="well">
	<div class="clr-rght-lg well">
		Cet élément efface les éléments flottants à droite sur les grands écrans (lg) dans son conteneur parent.
	</div>
</div>

Exemple fonctionnel de de la classe .clr-rght-md

Exemple de code

<div class="well">
	<div class="clr-rght-md well">
		Cet élément efface les éléments flottants à droite sur les écrans moyens (md) dans son conteneur parent.
	</div>
</div>

Contenu basculant

Exemple fonctionnel de de la classe Bootstrap 3 .hide

Exemple de code

<div class="well">
	<div class="hide well">
		Cet élément est masqué sur toutes les tailles d'écran.
	</div>
</div>

Exemple fonctionnel de de la classe Bootstrap 3 .show

Exemple de code

<div class="well">
	<div class="show well">
		Cet élément est visible sur toutes les tailles d'écran.
	</div>
</div>

Exemple fonctionnel de de la classe Bootstrap 3 .invisible

Exemple de code

<div class="well">
	<div class="invisible well">
		Cet élément est invisible mais occupe toujours de l'espace dans la mise en page.
	</div>
</div>

Exemple fonctionnel de de la classe Bootstrap 3 .text-hide

Exemple de code

<div class="well">
	<div class="text-hide well">
		Ce texte est masqué visuellement mais reste accessible aux lecteurs d'écran.
	</div>
</div>

Exemple fonctionnel de de la classe Bootstrap 3 .hidden

Exemple de code

<div class="well">
	<div class="hidden well">
		Cet élément est masqué sur toutes les tailles d'écran.
	</div>
</div>

Exemple fonctionnel de de la classe .sr-only

Exemple de code

<div class="well">
	<div class="sr-only well">
		Cet élément est masqué visuellement mais accessible aux lecteurs d'écran.
	</div>
</div>

Exemple fonctionnel de de la classe .sr-only-focusable

Exemple de code

<div class="well">
	<div class="sr-only-focusable well">
		Cet élément est masqué visuellement mais reste accessible aux lecteurs d'écran et peut être mis au focus par la navigation au clavier.
	</div>
</div>

Visibilité

Exemple fonctionnel de de la classe .visible-xs-inline

Exemple de code

<div class="well">
	<div class="visible-xs-inline well">
		Cet élément est visible sur les petits écrans (xs) et a une mise en page en ligne.
	</div>
</div>

Exemple fonctionnel de de la classe .visible-xs-block

Exemple de code

<div class="well">
	<div class="visible-xs-block well">
		Cet élément est visible sur les petits écrans (xs) et a une mise en page en bloc.
	</div>
</div>

Exemple fonctionnel de de la classe .visible-xs-inline-block

Exemple de code

<div class="well">
	<div class="visible-xs-inline-block well">
		Cet élément est visible sur les petits écrans (xs) et a une mise en page en ligne-bloc.
	</div>
</div>

Exemple fonctionnel de de la classe .hidden-xs-inline

Exemple de code

<div class="well">
<div class="hidden-xs-inline well">
	Cet élément est masqué sur les petits écrans (xs) et a une mise en page en ligne.
</div>
</div>

Exemple fonctionnel de de la classe .hidden-xs-block

Exemple de code

<div class="well">
	<div class="hidden-xs-block well">
		Cet élément est masqué sur les petits écrans (xs) et a une mise en page en bloc.
	</div>
</div>

Exemple fonctionnel de de la classe .hidden-xs-inline-block

Exemple de code

<div class="well">
	<div class="hidden-xs-inline-block well">
		Cet élément est masqué sur les petits écrans (xs) et a une mise en page en ligne-bloc.
	</div>
</div>

Exemple fonctionnel de de la classe .visible-xs-inline

Exemple de code

<div class="well">
	<div class="visible-xs-inline well">
		Cet élément est visible sur les petits écrans (xs) et a une mise en page en ligne.
	</div>
</div>

Exemple fonctionnel de de la classe .visible-xs-block

Exemple de code

<div class="well">
	<div class="visible-xs-block well">
		Cet élément est visible sur les petits écrans (xs) et a une mise en page en bloc.
	</div>
</div>

Exemple fonctionnel de de la classe .visible-xs-inline-block

Exemple de code

<div class="well">
	<div class="visible-xs-inline-block well">
		Cet élément est visible sur les petits écrans (xs) et a une mise en page en ligne-bloc.
	</div>
</div>

Exemple fonctionnel de de la classe .hidden-xs-inline

Exemple de code

<

div class="well">
	<div class="hidden-xs-inline well">
		Cet élément est masqué sur les petits écrans (xs) et a une mise en page en ligne.
	</div>
</div>

Exemple fonctionnel de de la classe .hidden-xs-block

Exemple de code

<div class="well">
	<div class="hidden-xs-block well">
		Cet élément est masqué sur les petits écrans (xs) et a une mise en page en bloc.
	</div>
</div>

Exemple fonctionnel de de la classe .hidden-xs-inline-block

Exemple de code

<div class="well">
	<div class="hidden-xs-inline-block well">
		Cet élément est masqué sur les petits écrans (xs) et a une mise en page en ligne-bloc.
	</div>
</div>

Exemple fonctionnel de de la classe .visible-sm-inline

Exemple de code

<div class="well">
	<div class="visible-sm-inline well">
		Cet élément est visible sur les écrans petits (sm) et a une mise en page en ligne.
	</div>
</div>

Exemple fonctionnel de de la classe .visible-sm-block

Exemple de code

<div class="well">
	<div class="visible-sm-block well">
		Cet élément est visible sur les écrans petits (sm) et a une mise en page en bloc.
	</div>
</div>

Exemple fonctionnel de de la classe .visible-sm-inline-block

Exemple de code

<div class="well">
	<div class="visible-sm-inline-block well">
		Cet élément est visible sur les écrans petits (sm) et a une mise en page en ligne-bloc.
	</div>
</div>

Exemple fonctionnel de de la classe .hidden-sm-inline

Exemple de code

<div class="well">
	<div class="hidden-sm-inline well">
		Cet élément est masqué sur les écrans petits (sm) et a une mise en page en ligne.
	</div>
</div>

Exemple fonctionnel de de la classe .hidden-sm-block

Exemple de code

<div class="well">
	<div class="hidden-sm-block well">
		Cet élément est masqué sur les écrans petits (sm) et a une mise en page en bloc.
	</div>
</div>

Exemple fonctionnel de de la classe .hidden-sm-inline-block

Exemple de code

<div class="well">
	<div class="hidden-sm-inline-block well">
		Cet élément est masqué sur les écrans petits (sm) et a une mise en page en ligne-bloc.
	</div>
</div>

Exemple fonctionnel de de la classe .visible-md-inline

Exemple de code

<div class="well">
	<div class="visible-md-inline well">
		Cet élément est visible sur les écrans moyens (md) et a une mise en page en ligne.
	</div>
</div>

Exemple fonctionnel de de la classe .visible-md-block

Exemple de code

<div class="well">
	<div class="visible-md-block well">
		Cet élément est visible sur les écrans moyens (md) et a une mise en page en bloc.
	</div>
</div>

Exemple fonctionnel de de la classe .visible-md-inline-block

Exemple de code

<div class="well">
	<div class="visible-md-inline-block well">
		Cet élément est visible sur les écrans moyens (md) et a une mise en page en ligne-bloc.
	</div>
</div>

Exemple fonctionnel de de la classe .hidden-md-inline

Exemple de code

<div class="well">
	<div class="hidden-md-inline well">
		Cet élément est masqué sur les écrans moyens (md) et a une mise en page en ligne.
	</div>
</div>

Exemple fonctionnel de de la classe .hidden-md-block

Exemple de code

<div class="well">
	<div class="hidden-md-block well">
		Cet élément est masqué sur les écrans moyens (md) et a une mise en page en bloc.
	</div>
</div>

Exemple fonctionnel de de la classe .hidden-md-inline-block

Exemple de code

<div class="well">
	<div class="hidden-md-inline-block well">
		Cet élément est masqué sur les écrans moyens (md) et a une mise en page en ligne-bloc.
	</div>
</div>

Exemple fonctionnel de de la classe .visible-lg-inline

Exemple de code

<div class="well">
	<div class="visible-lg-inline well">
		Cet élément est visible sur les grands écrans (lg) et a une mise en page en ligne.
	</div>
</div>

Exemple fonctionnel de de la classe .visible-lg-block

Exemple de code

<div class="well">
	<div class="visible-lg-block well">
		Cet élément est visible sur les grands écrans (lg) et a une mise en page en bloc.
	</div>
</div>

Exemple fonctionnel de de la classe .visible-lg-inline-block

Exemple de code

<div class="well">
	<div class="visible-lg-inline-block well">
		Cet élément est visible sur les grands écrans (lg) et a une mise en page en ligne-bloc.
	</div>
</div>

Exemple fonctionnel de de la classe .hidden-lg-inline

Exemple de code

<div class="well">
	<div class="hidden-lg-inline well">
		Cet élément est masqué sur les grands écrans (lg) et a une mise en page en ligne.
	</div>
</div>

Exemple fonctionnel de de la classe .hidden-lg-block

Exemple de code

<div class="well">
	<div class="hidden-lg-block well">
		Cet élément est masqué sur les grands écrans (lg) et a une mise en page en bloc.
	</div>
</div>

Exemple fonctionnel de de la classe .hidden-lg-inline-block

Exemple de code

<div class="well">
	<div class="hidden-lg-inline-block well">
		Cet élément est masqué sur les grands écrans (lg) et a une mise en page en ligne-bloc.
	</div>
</div>

Opacité

Exemple fonctionnel de de la classe .opct-10

Exemple de code

<div class="well">
	<div class="opct-10 well">
		Cet élément a une opacité de 0.1 (10%).
	</div>
</div>

Exemple fonctionnel de de la classe .opct-20

Exemple de code

<div class="well">
	<div class="opct-20 well">
		Cet élément a une opacité de 0.2 (20%).
	</div>
</div>

Exemple fonctionnel de de la classe .opct-30

Exemple de code

<div class="well">
	<div class="opct-30 well">
		Cet élément a une opacité de 0.3 (30%).
	</div>
</div>

Exemple fonctionnel de de la classe .opct-40

Exemple de code

<div class="well">
	<div class="opct-40 well">
		Cet élément a une opacité de 0.4 (40%).
	</div>
</div>

Exemple fonctionnel de de la classe .opct-50

Exemple de code

<div class="well">
	<div class="opct-50 well">
		Cet élément a une opacité de 0.5 (50%).
	</div>
</div>

Exemple fonctionnel de de la classe .opct-60

Exemple de code

<div class="well">
	<div class="opct-60 well">
		Cet élément a une opacité de 0.6 (60%).
	</div>
</div>

Exemple fonctionnel de de la classe .opct-70

Exemple de code

<div class="well">
	<div class="opct-70 well">
		Cet élément a une opacité de 0.7 (70%).
	</div>
</div>

Exemple fonctionnel de de la classe .opct-80

Exemple de code

<div class="well">
	<div class="opct-80 well">
		Cet élément a une opacité de 0.8 (80%).
	</div>
</div>

Exemple fonctionnel de de la classe .opct-90

Exemple de code

<div class="well">
	<div class="opct-90 well">
		Cet élément a une opacité de 0.9 (90%).
	</div>
</div>

Exemple fonctionnel de de la classe .opct-100

Exemple de code

<div class="well">
	<div class="opct-100 well">
		Cet élément a une opacité de 1 (100%).
	</div>
</div>

Contenu basculant WET

Exemple fonctionnel de de la classe .nojs-show

Exemple de code

<div class="well">
	<div class="nojs-show well">
		Cet élément est initialement masqué, mais il sera affiché lorsque JavaScript est désactivé.
	</div>
</div>

Exemple fonctionnel de de la classe .nojs-hide

Exemple de code

<div class="well">
	<div class="nojs-hide well">
		Cet élément est initialement visible, mais il sera masqué lorsque JavaScript est désactivé.
	</div>
</div>

Exemple fonctionnel de de la classe .wb-inv

Exemple de code

<div class="well">
	<div class="wb-inv well">
		Cet élément est invisible et masqué de tous les utilisateurs, y compris les lecteurs d'écran.
	</div>
</div>

Exemple fonctionnel de de la classe .wb-invisible

Exemple de code

<div class="well">
	<div class="wb-invisible well">
		Cet élément est invisible, mais accessible aux lecteurs d'écran.
	</div>
</div>

Exemple fonctionnel de de la classe .wb-show-onfocus

Exemple de code

<div class="well">
	<input type="text" class="wb-show-onfocus well" placeholder="Mettez le focus sur cet élément pour révéler l'élément">
</div>

Nombre de colonnes

Il divise l'élément en plusieurs colonnes. C'est une manière de faire du positionnement qui n'est pas limitée aux éléments de liste, mais qui inclut également les div/sections.

Exemple fonctionnel de de la classe .colcount-xxs-2

Exemple de code

<div class="well">
	<div class="colcount-xxs-2 well">
		Cet élément occupe 1 sur 2 colonnes sur les écrans extra-small (xxs).
	</div>
</div>

Exemple fonctionnel de de la classe .colcount-xxs-3

Exemple de code

<div class="well">
	<div class="colcount-xxs-3 well">
		Cet élément occupe 1 sur 3 colonnes sur les écrans extra-small (xxs).
	</div>
</div>

Exemple fonctionnel de de la classe .colcount-xxs-4

Exemple de code

<div class="well">
	<div class="colcount-xxs-4 well">
		Cet élément occupe 1 sur 4 colonnes sur les écrans extra-small (xxs).
	</div>
</div>

Exemple fonctionnel de de la classe .colcount-xs-2

Exemple de code

<div class="well">
	<div class="colcount-xs-2 well">
		Cet élément occupe 1 sur 2 colonnes sur les écrans extra-small (xs).
	</div>
</div>

Exemple fonctionnel de de la classe .colcount-xs-3

Exemple de code

<div class="well">
	<div class="colcount-xs-3 well">
		Cet élément occupe 1 sur 3 colonnes sur les écrans extra-small (xs).
	</div>
</div>

Exemple fonctionnel de de la classe .colcount-xs-4

Exemple de code

<div class="well">
	<div class="colcount-xs-4 well">
		Cet élément occupe 1 sur 4 colonnes sur les écrans extra-small (xs).
	</div>
</div>

Exemple fonctionnel de de la classe .colcount-sm-2

Exemple de code

<div class="well">
	<div class="colcount-sm-2 well">
		Cet élément occupe 1 sur 2 colonnes sur les écrans small (sm).
	</div>
</div>

Exemple fonctionnel de de la classe .colcount-sm-3

Exemple de code

<div class="well">
	<div class="colcount-sm-3 well">
		Cet élément occupe 1 sur 3 colonnes sur les écrans small (sm).
	</div>
</div>

Exemple fonctionnel de de la classe .colcount-sm-4

Exemple de code

<div class="well">
	<div class="colcount-sm-4 well">
		Cet élément occupe 1 sur 4 colonnes sur les écrans small (sm).
	</div>
</div>

Exemple fonctionnel de de la classe .colcount-lg-2

Exemple de code

<div class="well">
	<div class="colcount-lg-2 well">
		Cet élément occupe 1 sur 2 colonnes sur les écrans large (lg).
	</div>
</div>

Exemple fonctionnel de de la classe .colcount-lg-3

Exemple de code

<div class="well">
	<div class="colcount-lg-3 well">
		Cet élément occupe 1 sur 3 colonnes sur les écrans large (lg).
	</div>
</div>

Exemple fonctionnel de de la classe .colcount-lg-4

Exemple de code

<div class="well">
	<div class="colcount-lg-4 well">
		Cet élément occupe 1 sur 4 colonnes sur les écrans large (lg).
	</div>
</div>

Exemple fonctionnel de de la classe .colcount-xl-2

Exemple de code

<div class="well">
	<div class="colcount-xl-2 well">
		Cet élément occupe 1 sur 2 colonnes sur les écrans extra-large (xl).
	</div>
</div>

Exemple fonctionnel de de la classe .colcount-xl-3

Exemple de code

<div class="well">
	<div class="colcount-xl-3 well">
		Cet élément occupe 1 sur 3 colonnes sur les écrans extra-large (xl).
	</div>
</div>

Exemple fonctionnel de de la classe .colcount-xl-4

Exemple de code

<div class="well">
	<div class="colcount-xl-4 well">
		Cet élément occupe 1 sur 4 colonnes sur les écrans extra-large (xl).
	</div>
</div>

Contrôles de dimensionnement

Exemple fonctionnel de de la classe .h-100

Exemple de code

<div class="well">
	<div class="h-100">
		Cet élément a une hauteur de 100 % de son conteneur parent.
	</div>
</div>

Exemple fonctionnel de de la classe .full-width

Exemple de code

<div class="well">
	<div class="full-width">
		Cet élément s'étend sur toute la largeur de son conteneur parent.
	</div>
</div>

Exemple fonctionnel de de la classe .max-content

Exemple de code

<div class="well">
	<div class="max-content well">
		Cet élément ajuste sa largeur pour s'adapter à son contenu, mais pas plus large que son conteneur parent.
	</div>
</div>