Tutoriel Bootstrap 5 - #6 Mise En Page (1/2) • Informerick

Bienvenue dans cet article dédié aux règles de base de la mise en page avec Bootstrap. Dans ce tutoriel, nous allons explorer les différentes classes de mise en page disponibles dans Bootstrap pour vous aider à créer des mises en page professionnelles et réactives pour vos sites web.

Nous allons couvrir les éléments suivants : Display CSS, Visibilité, Marges extérieures, Marges intérieures, Positions, Flexbox Bootstrap, ainsi que des questions fréquemment posées et leurs réponses. Assurez-vous de suivre les étapes pas à pas et de consulter la documentation officielle de Bootstrap pour plus d’informations.

Table des matières masquer

1. Version vidéo

2. Display CSS

3. Visibilité

4. Marges extérieures

5. Marges intérieures

6. Positions

7. Flexbox Bootstrap

Version vidéo

Tu préfères la version vidéo? Je t’invite à regarder ce tutoriel version vidéo sur la chaîne YouTube Informerick.

Display CSS

L’affichage des éléments est une étape fondamentale dans la mise en page avec Bootstrap. Vous pouvez utiliser les classes suivantes pour modifier l’affichage des éléments :

.d-none : Masque complètement l’élément.
.d-inline : Affiche l’élément en tant qu’élément en ligne.
.d-inline-block : Affiche l’élément en tant qu’élément en ligne avec une boîte.
.d-block : Affiche l’élément en tant qu’élément de bloc.

Pour plus de détails sur les classes d’affichage, consultez la documentation de Bootstrap : Affichage dans Bootstrap.

Visibilité

La visibilité des éléments peut être modifiée en utilisant les classes suivantes :

.visible : Rend l’élément visible.
.invisible : Rend l’élément invisible tout en occupant toujours de l’espace sur la page.

Pour en savoir plus sur les classes de visibilité, consultez la documentation de Bootstrap : Visibilité dans Bootstrap.

Marges extérieures

Les marges extérieures permettent de contrôler l’espace autour des éléments. Bootstrap propose différentes classes de marges extérieures avec des valeurs prédéfinies. Utilisez les classes suivantes pour définir les marges extérieures :

.m-1, .m-2, .m-3, .m-4, .m-5 : Définissent les marges extérieures de 1 à 5 respectivement.
.mt-1, .mt-2, .mt-3, .mt-4, .mt-5 : Définissent la marge extérieure supérieure de 1 à 5 respectivement.
.mb-1, .mb-2, .mb-3, .mb-4, .mb-5 : Définissent la marge extérieure inférieure de 1 à 5 respectivement.
.ml-1, .ml-2, .ml-3, .ml-4, .ml-5 : Définissent la marge extérieure gauche de 1 à 5 respectivement.
.mr-1, .mr-2, .mr-3, .mr-4, .mr-5 : Définissent la marge extérieure droite de 1 à 5 respectivement

Marges intérieures

Les marges intérieures permettent de contrôler l’espace à l’intérieur des éléments. Utilisez les classes suivantes pour définir les marges intérieures :

.p-1, .p-2, .p-3, .p-4, .p-5 : Définissent les marges intérieures de 1 à 5 respectivement.
.pt-1, .pt-2, .pt-3, .pt-4, .pt-5 : Définissent la marge intérieure supérieure de 1 à 5 respectivement.
.pb-1, .pb-2, .pb-3, .pb-4, .pb-5 : Définissent la marge intérieure inférieure de 1 à 5 respectivement.
.pl-1, .pl-2, .pl-3, .pl-4, .pl-5 : Définissent la marge intérieure gauche de 1 à 5 respectivement.
.pr-1, .pr-2, .pr-3, .pr-4, .pr-5 : Définissent la marge intérieure droite de 1 à 5 respectivement.

Pour en savoir plus sur les classes de marges intérieures, consultez la documentation de Bootstrap : Marges intérieures dans Bootstrap.

Positions

Les positions permettent de modifier le positionnement des éléments sur la page. Bootstrap propose différentes classes pour gérer les positions :

.position-static : Position statique par défaut.
.position-relative : Position relative par rapport à sa position normale.
.position-absolute : Position absolue par rapport à son parent positionné.
.position-fixed : Position fixe par rapport à la fenêtre du navigateur.
.position-sticky : Position collante qui reste fixe lors du défilement.

Pour plus d’informations sur les positions dans Bootstrap, consultez la documentation : Positions dans Bootstrap.

Flexbox Bootstrap

Flexbox est une fonctionnalité puissante pour la mise en page réactive. Bootstrap fournit des classes de flexbox pour faciliter la création de mises en page flexibles. Voici quelques classes de flexbox couramment utilisées :

.d-flex : Définit un conteneur en mode flex.
.flex-row : Définit la direction de flexion en ligne.
.flex-column : Définit la direction de flexion en colonne.
.justify-content-start, .justify-content-end, .justify-content-center : Définissent l’alignement horizontal des éléments.
.align-items-start, .align-items-end, .align-items-center : Définissent l’alignement vertical des éléments.

Pour découvrir davantage de classes de flexbox Bootstrap, consultez la documentation : Flexbox dans Bootstrap.

FAQ

Comment puis-je cacher un élément avec Bootstrap ?

Pour masquer un élément, vous pouvez utiliser la classe .d-none. Cette classe rendra l’élément invisible et ne lui attribuera pas d’espace dans la mise en page.

Comment puis-je rendre un élément visible avec Bootstrap ?

Pour rendre un élément visible, vous pouvez utiliser la classe .d-block. Cette classe définit l’élément comme un bloc visible dans la mise en page.

Comment puis-je centrer un élément horizontalement avec Bootstrap ?

Pour centrer un élément horizontalement, vous pouvez utiliser la classe .mx-auto. Cette classe définit une marge horizontale automatique, ce qui permet de centrer l’élément dans son conteneur.

Comment puis-je centrer un élément verticalement avec Bootstrap ?

Pour centrer un élément verticalement, vous pouvez utiliser la classe .my-auto. Cette classe définit une marge verticale automatique, ce qui permet de centrer l’élément dans son conteneur.