Come raggruppare i pulsanti in bootstrap 5 | Spiegato

I pulsanti sono una parte cruciale di un sito Web se si desidera che il tuo utente esegui una determinata attività come invio, elimina o cancella. Tuttavia, se si desidera raggruppare i pulsanti per visualizzare una serie di azioni collegate, questo può essere fatto facilmente usando Bootstrap 5. Come raggruppare i pulsanti usando bootstrap 5 insieme a come modellare e allineare i gruppi di pulsanti sono stati riassunti in questo blog.

Come creare gruppi di pulsanti

Ai fini del raggruppamento di pulsanti o allineare i pulsanti raggruppati in orizzontale, è necessario assegnare un .Classe BTN-Group al contenitore di div che avvolge i pulsanti.

Html

Lo snippet di codice genererà quattro pulsanti raggruppati insieme, ogni pulsante con imbottitura definita, sfondo azzurro e colore di testo bianco.

Produzione

IL .La classe BTN-Group viene utilizzata per raggruppare i pulsanti, mentre anche per impostazione predefinita allinea questi gruppi di pulsanti orizzontalmente.

Come allineare i pulsanti raggruppati in verticale

Se desideri raggruppare i pulsanti mentre li allinei in direzione verticale, bootstrap 5 fornisce la classe .btn-group-vertica che soddisferà questo compito immediatamente.

Html

Qui verranno generati quattro pulsanti che sono raggruppati insieme, inoltre, questi pulsanti avranno una direzione verticale.

Produzione

Il gruppo di pulsanti è stato allineato correttamente verticalmente.

Come dare una certa dimensione a pulsanti raggruppati

Per ridimensionare le dimensioni dei gruppi di pulsanti su e giù puoi utilizzare le classi Bootstrap 5 associate al dimensionamento del gruppo di pulsanti come ad esempio .Btn-Group-Sm, .Btn-Group-MD, .BTN-GROUP-LG, .BTN-GROUP-XL.

Html

Il codice creerà tre gruppi di pulsanti allineati orizzontalmente. Il primo gruppo di pulsanti avrà una grande dimensione, il secondo mezzo e l'ultimo piccolo.

Produzione

È possibile regolare le dimensioni dei gruppi di pulsanti a seconda di come hai allineato gli altri contenuti sul sito Web.

Come allineare più gruppi di pulsanti in linea

Non importa quanti gruppi di pulsanti si posizionano all'interno del contenitore, tutti questi verranno automaticamente allineati in direzione orizzontale. Di seguito abbiamo dimostrato questo comportamento predefinito dei gruppi di pulsanti con l'aiuto di un esempio.

Html

Applicazione del codice sopra sarai in grado di generare gruppi di due pulsanti che saranno per impostazione predefinita in linea allineata. Puoi allineare più gruppi di pulsanti in linea se lo desideri.

Produzione

Ecco come allineano più gruppi di pulsanti in linea.

Conclusione

Ai fini del raggruppamento dei pulsanti usando Bootstrap 5 Utilizzare il .Classe BTN-Group. Questa classe, insieme a gruppi di pulsanti di generazione, li allineerà anche in orizzontale. Nel frattempo, al fine di allineare questi gruppi utilizzare verticalmente il .classe btn-gruppo-verticale. Inoltre, se desideri dare una dimensione particolare ai gruppi di pulsanti, puoi usare varie classi come .btn-sm, .btn-md, .btn-lg, ecc. Utilizzando queste classi puoi creare e modellare i gruppi di pulsanti.