Terrain de jeu Flex Bootstrap

Tous les outils

Composez visuellement des mises en page flex Bootstrap 5.3 et copiez les classes utilitaires exactes — d-flex, justify-content, align-items, order, grow et plus encore.

Aperçu Cliquez sur un élément pour le modifier
HTML généré
—

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.

Conteneur
Éléments
0
Élément sélectionné

À propos de Terrain de jeu 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 Terrain de jeu 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

Bootstrap est mobile-first : une classe définie à un point de rupture s'applique à partir de cette largeur et au-delà. Régler justify-content-between alors que md est sélectionné produit justify-content-md-between, qui s'active à 768 px et reste actif sur les écrans plus grands.

Cet outil génère des classes utilitaires Bootstrap 5.3 (d-flex, justify-content-center, order-2) prêtes pour un projet Bootstrap. Le Bac à Sable Flexbox génère à la place des propriétés CSS pures — choisissez celui qui correspond à votre pile technique.

Oui. Cliquez sur n'importe quel élément dans l'aperçu pour le sélectionner, puis définissez des utilitaires par élément tels que align-self, order, grow et shrink. Le HTML généré affiche chaque élément avec exactement les classes que vous avez assignées.

Entre 2 et 12. Cette plage couvre tout, d'un simple en-tête à deux colonnes à une barre d'outils complète, tout en gardant l'aperçu lisible pendant que vous expérimentez.

Oui, il est gratuit et fonctionne entièrement dans votre navigateur — pas d'inscription, et rien de ce que vous construisez n'est téléversé où que ce soit.
Partager
Outils similaires
Générateur de signature e-mail Créez une signature e-mail HTML professionnelle parmi 30 modèles, personnalisez-la et enregistrez-la. Gratuit
Icône en PNG Convertissez Bootstrap Icons, Font Awesome et plus en images PNG personnalisées — gratuit, dans votre navigateur. Gratuit
Générateur d'icônes d'app Générez un jeu complet d'icônes prêtes à publier pour l'App Store et Google Play — superbes fonds dégradés, mesh et motifs, à partir de votre logo. Gratuit
Générateur de favicon Créez un pack complet de favicons à partir d'un logo, d'une icône ou d'un monogramme — favicon.ico, PNG modernes, icône Apple, icônes PWA, manifeste web et extrait HTML. Gratuit
Générateur d'ombre portée CSS Composez des ombres portées CSS en couches avec des curseurs en direct pour le décalage, le flou, l'étalement, la couleur, l'opacité et le mode intérieur — prévisualisez sur un vrai élément et copiez le CSS prêt à coller instantanément. Gratuit
Générateur de border-radius CSS Créez visuellement des border-radius CSS avec aperçu en direct et copiez un code prêt pour la production. Gratuit
Recherches populaires
terrain de jeu flex bootstrap générateur flexbox bootstrap utilitaires flex bootstrap 5 générateur de classe d-flex justify-content align-items bootstrap générateur de classes flex bootstrap outil flexbox responsive bootstrap
Besoin d'aide ?
Un problème avec cet outil ? Signalez-le à notre équipe.
Signaler un problème

Ajoutez cet outil gratuit à votre propre site web — copiez-collez le code ci-dessous.