Comment regrouper les boutons dans Bootstrap 5 | Expliqué

Les boutons sont une partie cruciale d'un site Web si vous souhaitez que votre utilisateur effectue une certaine tâche telle que soumettre, supprimer ou annuler. Cependant, si vous souhaitez regrouper les boutons ensemble pour afficher un ensemble d'actions liées, cela peut être fait facilement à l'aide de bootstrap 5. Comment regrouper les boutons à l'aide de bootstrap 5 ainsi que comment style et aligner les groupes de bouton ont été résumées dans ce blog.

Comment créer des groupes de bouton

Afin de regrouper les boutons ou d'aligner les boutons groupés horizontalement, vous devez attribuer un .classe de groupe BTN au conteneur div enroulant les boutons.

Html

L'extrait de code générera quatre boutons regroupés, chaque bouton ayant un rembourrage défini, un fond bleu clair et une couleur de texte blanc.

Sortir

Le .La classe de groupe BTN est utilisée pour regrouper les boutons, alors qu'il aligne également par défaut ces groupes de boutons horizontalement.

Comment aligner les boutons groupés verticalement

Si vous souhaitez regrouper les boutons tout en les alignant dans une direction verticale, Bootstrap 5 fournit la classe .BTN-Groupe-Vertical qui remplira cette tâche immédiatement.

Html

Ici, quatre boutons regroupés seront générés, de plus, ces boutons auront une direction verticale.

Sortir

Le groupe de boutons a été aligné avec succès verticalement.

Comment donner une certaine taille aux boutons groupés

Afin de mettre à l'échelle la taille de vos groupes de boutons de haut en bas, vous pouvez utiliser les classes Bootstrap 5 associées au dimensionnement du groupe de boutones telles que .btn-group-sm, .btn-group-md, .btn-group-lg, .btn-group-xl.

Html

Le code créera trois groupes de boutons alignés horizontalement. Le premier groupe de bouton aura une grande taille, le deuxième milieu et le dernier petit.

Sortir

Vous pouvez ajuster la taille des groupes de boutons en fonction de la façon dont vous avez aligné votre autre contenu sur le site Web.

Comment aligner plusieurs groupes de bouton en ligne

Peu importe le nombre de groupes de boutons que vous placez à l'intérieur du conteneur, tous ces éléments seront automatiquement alignés dans une direction horizontale. Ci-dessous, nous avons démontré ce comportement par défaut des groupes de boutons à l'aide d'un exemple.

Html

En appliquant le code ci-dessus, vous pourrez générer deux groupes de bouton qui seront par défaut alignés en ligne. Vous pouvez aligner plus de groupes de bouton en ligne si vous le souhaitez.

Sortir

C'est ainsi que vous alignez plusieurs groupes de bouton en ligne.

Conclusion

Afin de regrouper les boutons à l'aide de bootstrap 5 .classe de groupe BTN. Cette classe, ainsi que la génération de groupes de boutons, les aligneront également horizontalement. En attendant, afin d'aligner ces groupes à utiliser verticalement .classe BTN-Groupe-verticale. De plus, si vous souhaitez donner une taille particulière à vos groupes de boutons, vous pouvez utiliser diverses classes telles que .btn-sm, .btn-md, .BTN-LG, etc. En utilisant ces classes, vous pouvez facilement créer et styliser vos groupes de boutons.