Como agrupar os botões no bootstrap 5 | Explicado

Os botões são uma parte crucial de um site, se você deseja que seu usuário execute uma determinada tarefa, como enviar, excluir ou cancelar. No entanto, se você deseja agrupar botões para exibir um conjunto de ações vinculadas, isso pode ser feito facilmente usando o bootstrap 5. Como agrupar os botões usando o bootstrap 5, juntamente com como estilizar e alinhar, grupos de botões foram resumidos neste blog.

Como criar grupos de botões

Com o objetivo de agrupar botões ou alinhar botões agrupados horizontalmente, você deve atribuir um .Classe BTN-Grupo para o contêiner div embrulhando os botões.

Html

O trecho de código gerará quatro botões agrupados, cada botão com um preenchimento definitivo, fundo azul claro e cor branca de texto.

Saída

O .A classe BTN-Grupo é usada para agrupar botões, enquanto que também, por padrão, alinha esses grupos de botões horizontalmente.

Como alinhar os botões agrupados verticalmente

Se você deseja agrupar os botões enquanto os alinham em uma direção vertical, o Bootstrap 5 fornece a classe .BTN-Grupo-vertical que cumprirá esta tarefa imediatamente.

Html

Aqui, quatro botões agrupados serão gerados, além disso, esses botões terão uma direção vertical.

Saída

O grupo de botões estava alinhado com sucesso verticalmente.

Como dar um certo tamanho aos botões agrupados

Para dimensionar o tamanho dos grupos de botões para cima e para baixo, você pode usar o Bootstrap 5 classes associadas ao dimensionamento do grupo de botões, como .btn-group-sm, .btn-group-md, .btn-group-lg, .BTN-GROUP-XL.

Html

O código criará três grupos de botões alinhados horizontalmente. O primeiro grupo de botões terá um tamanho grande, o segundo meio e o último pequeno.

Saída

Você pode ajustar o tamanho dos grupos de botões, dependendo de como alinhou seu outro conteúdo no site.

Como alinhar vários grupos de botões embutidos

Não importa quantos grupos de botões você coloque dentro do recipiente, tudo isso será alinhado automaticamente em uma direção horizontal. Abaixo, demonstramos esse comportamento padrão dos grupos de botões com a ajuda de um exemplo.

Html

Aplicando o código acima, você poderá gerar dois grupos de botões que estarão por padrão alinhados em linha. Você pode alinhar mais grupos de botões alinhados se desejar.

Saída

É assim que você alinha vários grupos de botões embutidos.

Conclusão

Com o objetivo de agrupar botões usando o bootstrap 5, use o .Classe BTN-Grupo. Esta aula, juntamente com os grupos de botões de geração, também os alinhará horizontalmente. Enquanto isso, para alinhar esses grupos verticalmente o .Classe BTN-Grupo-Vertical. Além disso, se você deseja dar um tamanho específico aos seus grupos de botões, poderá usar várias classes, como .btn-sm, .btn-md, .btn-lg, etc. Utilizando essas classes, você pode criar e estilizar facilmente seus grupos de botões.