Bac à sable Flex Bootstrap

À propos de Bac à sable Flex Bootstrap

Le Bac à Sable Bootstrap Flex vous permet de créer des dispositions flexbox avec de vraies classes utilitaires Bootstrap 5.3 plutôt qu'en CSS brut. Configurez le conteneur (direction, retour à la ligne, justify-content, align-items, gap) avec des contrôles segmentés, cliquez sur n'importe quel élément pour définir son propre align-self, order, grow et shrink, et regardez l'aperçu en direct se réorganiser instantanément.

Le sélecteur de points de rupture est ce qui en fait plus qu'un jouet : choisissez sm, md, lg, xl ou xxl et les classes que vous définissez à partir de ce point gagnent le suffixe responsive (justify-content-md-between, flex-lg-row) exactement comme le système mobile-first de Bootstrap les applique à partir de ce point de rupture et au-delà. Ajoutez jusqu'à 12 éléments pour simuler un composant réaliste.

Une fois la disposition satisfaisante, copiez le HTML généré ou juste les classes du conteneur et collez-les directement dans votre projet. Tout fonctionne dans votre navigateur et rien n'est téléversé.

Comment utiliser Bac à sable Flex Bootstrap

1. Réglez les utilitaires du conteneur (direction, retour à la ligne, justify-content, align-items et gap) avec les contrôles segmentés.
2. Ajoutez ou retirez des éléments (2 à 12) pour correspondre à votre composant réel.
3. Cliquez sur un élément pour lui donner son propre align-self, order ou utilitaires de dimensionnement flex.
4. Changez de point de rupture pour ajouter des variantes responsives qui s'appliquent à partir de sm, md, lg, xl ou xxl et au-delà.
5. Vérifiez l'aperçu en direct, puis copiez le HTML généré ou les classes du conteneur.

Questions fréquentes