Utilitaires de mise en page
Pour un développement plus rapide et réactif, Bootstrap comprend des dizaines de classes utilitaires pour afficher, masquer, aligner et espacer le contenu.
En changeantdisplay
Utilisez nos utilitaires d'affichage pour basculer de manière réactive les valeurs communes de la display
propriété. Mélangez-le avec notre système de grille, notre contenu ou nos composants pour les afficher ou les masquer dans des fenêtres spécifiques.
Options de boîte flexible
Bootstrap est construit avec flexbox, mais tous les éléments n'ont pas display
été modifiés display: flex
car cela ajouterait de nombreux remplacements inutiles et modifierait de manière inattendue les comportements clés du navigateur. La plupart de nos composants sont construits avec flexbox activé.
Si vous avez besoin d'ajouter display: flex
un élément, faites-le avec .d-flex
ou l'une des variantes réactives (par exemple, .d-sm-flex
). Vous aurez besoin de cette classe ou de cette display
valeur pour permettre l'utilisation de nos utilitaires flexbox supplémentaires pour le dimensionnement, l'alignement, l'espacement, etc.
Marge et rembourrage
Utilisez les utilitaires d'espacementmargin
et pour contrôler l'espacement et la taille des éléments et des composants. Bootstrap inclut une échelle à six niveaux pour les utilitaires d'espacement, basée sur une variable de valeur par défaut . Choisissez des valeurs pour toutes les fenêtres (par exemple, pour dans LTR) ou choisissez des variantes réactives pour cibler des fenêtres spécifiques (par exemple, pour —dans LTR— en commençant au point d' arrêt).padding
1rem
$spacer
.me-3
margin-right: 1rem
.me-md-3
margin-right: 1rem
md
Basculervisibility
Lorsque le basculement display
n'est pas nécessaire, vous pouvez basculer visibility
d'un élément à l'aide de nos utilitaires de visibilité . Les éléments invisibles affecteront toujours la mise en page de la page, mais sont visuellement cachés aux visiteurs.