Référence des classes d'assistance CSS Bootstrap


Texte

Ajoutez du sens à travers les couleurs de texte avec les classes ci-dessous. Les liens s'assombrissent au survol :

Class Description Example
.text-muted Text styled with class "text-muted"
.text-primary Text styled with class "text-primary"
.text-success Text styled with class "text-success"
.text-info Text styled with class "text-info"
.text-warning Text styled with class "text-warning"
.text-danger Text styled with class "text-danger"

Fond

Ajoutez du sens à travers les couleurs d'arrière-plan avec les classes ci-dessous. Les liens s'assombrissent au survol, tout comme les classes de texte :

Class Description Example
.bg-primary Table cell is styled with class "bg-primary"
.bg-success Table cell is styled with class "bg-success"
.bg-info Table cell is styled with class "bg-info"
.bg-warning Table cell is styled with class "bg-warning"
.bg-danger Table cell is styled with class "bg-danger"

Autre

Class Description Example
.pull-left Floats an element to the left
.pull-right Floats an element to the right
.center-block Sets an element to display:block with margin-right:auto and margin-left:auto
.clearfix Clears floats
.show Forces an element to be shown (display:block)
.hidden Forces an element to be hidden (display:none)
.invisible Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible
.sr-only Hides an element to all devices except screen readers
.sr-only-focusable Combine with .sr-only to show the element again when it is focused (e.g. by a keyboard-only user)
.text-hide Helps replace an element's text content with a background image
.close Indicates a close icon
.caret Indicates dropdown functionality (will reverse automatically in dropup menus)


Utilitaires réactifs

Ces classes sont utilisées pour afficher et/ou masquer le contenu par appareil via des requêtes multimédias.

Utilisez une ou une combinaison des classes disponibles pour basculer le contenu entre les points d'arrêt de la fenêtre :

Des classes Très petits appareils Téléphones (<768px) Petits appareils Tablettes (≥768px) Appareils moyens Ordinateurs de bureau (≥992px) Grands appareils Ordinateurs de bureau (≥1200px)
.visible-xs-* Visible Caché Caché Caché
.visible-sm-* Caché Visible Caché Caché
.visible-md-* Caché Caché Visible Caché
.visible-lg-* Caché Caché Caché Visible
.hidden-xs Caché Visible Visible Visible
.caché-sm Visible Caché Visible Visible
.hidden-md Visible Visible Caché Visible
.caché-lg Visible Visible Visible Caché

Caché

Masquer les éléments en fonction de la taille de l'écran :

Exemple

<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="hidden-xs bg-danger">This text is hidden on an EXTRA SMALL screen.</h1>
<h1 class="hidden-sm bg-info">This text is hidden on a SMALL screen.</h1>
<h1 class="hidden-md bg-warning">This is text hidden on a MEDIUM screen.</h1>
<h1 class="hidden-lg bg-success">This is text hidden on a LARGE screen.</h1>

Résultat:

Example

Resize this page to see how the text below changes:

This text is hidden on an EXTRA SMALL screen.

This text is hidden on a SMALL screen.

This is text hidden on a MEDIUM screen.

This is text hidden on a LARGE screen.



Depuis la v3.2.0, les .visible-*-*classes sont disponibles en trois variantes, une pour chaque display valeur de propriété CSS :

Groupe de cours Affichage CSS
visible-*-bloc bloc de visualisation;
.visible-*-inline affichage : en ligne ;
.visible-*-inline-block affichage : bloc en ligne ;

Par exemple, pour les petits smécrans ( ), les .visible-*-*classes disponibles sont : .visible-sm-block, .visible-sm-inline, et .visible-sm-inline-block.

Les classes .visible-xs, .visible-sm, .visible-mdet .visible-lgsont obsolètes depuis la v3.2.0 .

Exemple

<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a LARGE screen.</h1>

Résultat:

Example

Resize this page to see how the text below changes:

This text is shown only on an EXTRA SMALL screen.

This text is shown only on a SMALL screen.

This text is shown only on a MEDIUM screen.

This text is shown only on a LARGE screen.