Utilitaires Bootstrap 4

Utilitaires Bootstrap 4

Bootstrap 4 a beaucoup de classes utilitaires/assistantes pour styliser rapidement les éléments sans utiliser de code CSS.

Les frontières

Utilisez les borderclasses pour ajouter ou supprimer des bordures d'un élément :

Couleur de la bordure

Ajoutez une couleur à la bordure avec l'une des classes de couleur de bordure contextuelle :

Rayon de bordure

Ajoutez des coins arrondis à un élément avec les roundedclasses :

Flottant et Clearfix

Faites flotter un élément vers la droite avec la .float-rightclasse ou vers la gauche avec .float-left, et effacez les flotteurs avec la .clearfixclasse :

Flotteurs réactifs

Faites flotter un élément vers la gauche ou vers la droite en fonction de la largeur de l'écran, avec les classes flottantes responsives ( .float-*-left|right- où * est sm(>=576px), md(>=768px), lg(>=992px) ou xl(>=1200px)) :

Aligner au centre

Centrer un élément avec la .mx-autoclasse (ajoute margin-left et margin-right : auto) :

Largeur

Définissez la largeur d'un élément avec les classes w-* ( .w-25, .w-50, .w-75, .w-100, .mw-100) :

Hauteur

Définissez la hauteur d'un élément avec les classes h-* ( .h-25, .h-50, .h-75, .h-100, .mh-100) :

Espacement

Bootstrap 4 propose une large gamme de classes utilitaires de marge et de rembourrage réactives. Ils fonctionnent pour tous les points d'arrêt : xs(<=576px), sm(>=576px), md(>=768px), lg(>=992px) ou xl(>=1200px) :

Les classes sont utilisées au format : {property}{sides}-{size}pour xset {property}{sides}-{breakpoint}-{size}pour sm, md, lget xl.

Lorsque la propriété est l'une des suivantes :

• m - ensembles margin
• p - ensembles padding

Où les côtés sont l'un des suivants :

• t- ensembles margin-topoupadding-top
• b- ensembles margin-bottomoupadding-bottom
• l- ensembles margin-leftoupadding-left
• r- ensembles margin-rightoupadding-right
• x- définit à la fois padding-leftet padding-rightou margin-leftetmargin-right
• y- définit à la fois padding-topet padding-bottomou margin-topetmargin-bottom
• vide - définit un marginou paddingsur les 4 côtés de l'élément

Où la taille est l'une des suivantes :

• 0- ensembles marginou paddingà0
• 1- définit marginou paddingà .25rem(4px si la taille de la police est de 16px)
• 2- définit marginou paddingà .5rem(8px si la taille de la police est de 16px)
• 3- définit marginou paddingà 1rem(16px si la taille de la police est de 16px)
• 4- définit marginou paddingà 1.5rem(24px si la taille de la police est de 16px)
• 5- définit marginou paddingà 3rem(48px si la taille de la police est de 16px)
• auto- passe marginen mode automatique

Note : les marges peuvent aussi être négatives, en ajoutant un "n" devant size :

• n1- définit marginsur -.25rem(-4px si la taille de la police est de 16px)
• n2- définit marginsur -.5rem(-8px si la taille de la police est de 16px)
• n3- définit marginsur -1rem(-16px si la taille de la police est de 16px)
• n4- définit marginsur -1.5rem(-24px si la taille de la police est de 16px)
• n5- définit marginsur -3rem(-48px si la taille de la police est de 16px)

Plus d'exemples d'espacement

Ombres

Utilisez les shadow-classes pour ajouter des ombres à un élément :

Alignement vertical

Utilisez les align-classes pour modifier l'alignement des éléments (ne fonctionne que sur les éléments inline, inline-block, inline-table et table cell):

Intégrations réactives

Créez des intégrations vidéo ou de diaporama réactives en fonction de la largeur du parent.

Ajoutez le .embed-responsive-itemà tous les éléments incorporés (comme <iframe> ou <video>) dans un élément parent avec .embed-responsiveet un format d'image de votre choix :

Visibilité

Utilisez les classes .visibleou pour contrôler la visibilité des éléments. Remarque : Ces classes ne modifient pas la valeur d'affichage CSS. Ils ajoutent seulement ou :.invisiblevisibility:visiblevisibility:hidden

Position

Utilisez la .fixed-topclasse pour rendre n'importe quel élément fixe/rester en haut de la page :

Use the .fixed-bottom class to make any element fixed/stay at the bottom of the page:

Use the .sticky-top class to make any element fixed/stay at the top of the page when you scroll past it. Note: This class does not work in IE11 and earlier (will treat it as position:relative).

Close icon

Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the × symbol to create the actual icon (a better looking "x"). Also note that it floats right by default:

Screenreaders

Use the .sr-only class to hide an element on all devices, except screen readers:

Colors

As described in the Colors chapter, here is a list of all text and background color classes:

The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light:

Contextual text classes can also be used on links, which will add a darker hover color:

You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:

Background Colors

The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Note that background colors do not set the text color, so in some cases you'll want to use them together with a .text-* class.

Typography/Text Classes

As described in the Typography chapter, here is a list of all typography/text classes:

Block Elements

To make an element into a block element, add the .d-block class. Use any of the d-*-block classes to control WHEN the element should be a block element on a specific screen width:

Other Display Classes

Other display classes are also available:

Flex

Use .flex-* classes to control the layout with flexbox.

Read more about Bootstrap 4 Flex, in our next chapter.