Bac à sable de grille Bootstrap
Composez visuellement des mises en page responsives avec la grille Bootstrap 5.3 et copiez les classes exactes : row, col, décalages, ordre, gouttières et alignement.
-
Tout s’exécute dans votre navigateur : rien n’est envoyé.
Les classes définies s’appliquent à partir de ce point de rupture et au-delà. Changez de point de rupture pour créer des mises en page responsives.
À propos de Bac à sable de grille Bootstrap
Le Bac à Sable Bootstrap Grid construit des dispositions réactives en lignes et colonnes avec le véritable système de grille Bootstrap 5.3. Ajoutez jusqu'à 12 colonnes à une ligne, cliquez sur n'importe quelle colonne pour définir sa largeur, son décalage et son ordre, et ajustez les gouttières et l'alignement sur la ligne : l'aperçu et le balisage généré se mettent à jour en direct à chaque changement.
Parce que les grilles Bootstrap sont mobile-first, le sélecteur de points de rupture est central : définissez une colonne sur col-6 à la base et col-md-4 à md, et vous avez construit le motif classique empilé sur mobile, trois côte à côte sur desktop, sans écrire une seule ligne de code. Les décalages, l'ordre et les classes de gouttière prennent tous les mêmes suffixes responsives.
Le résultat est du HTML propre à copier-coller : une div de ligne avec ses colonnes enfants et exactement les classes que vous avez configurées. Copiez l'extrait entier ou juste les classes de la ligne ; tout fonctionne localement dans votre navigateur.
Comment utiliser Bac à sable de grille Bootstrap
- Ajoutez des colonnes à la ligne, jusqu'à 12, et cliquez sur l'une d'elles pour la sélectionner.
- Définissez l'étendue, le décalage et l'ordre de la colonne sélectionnée pour le point de rupture actuel.
- Changez de point de rupture (sm à xxl) pour définir comment la disposition se réorganise sur les écrans plus grands.
- Ajustez les gouttières de la ligne et ses utilitaires d'alignement.
- Vérifiez l'aperçu en direct, puis copiez le HTML généré ou les classes de la ligne.