Cómo agrupar los botones en Bootstrap 5 | Explicado
Los botones son una parte crucial de un sitio web si desea que su usuario realice una determinada tarea, como enviar, eliminar o cancelar. Sin embargo, si desea agrupar los botones para mostrar un conjunto de acciones vinculadas, esto se puede hacer fácilmente usando Bootstrap 5. Cómo agrupar los botones usando Bootstrap 5 junto con cómo peinar y alinear a los grupos de botones se han resumido en este blog.
Cómo crear grupos de botones
Con el fin de agrupar botones, o alinear los botones agrupados horizontalmente, debe asignar un .clase BTN-Group al contenedor div envolviendo los botones.
Html
El fragmento de código generará cuatro botones agrupados, cada botón tiene un relleno definido, fondo azul claro y color de texto blanco.
Producción
El .La clase BTN-Group se utiliza para agrupar los botones, mientras que también, de forma predeterminada, alinea estos grupos de botones horizontalmente.
Cómo alinear los botones agrupados verticalmente
Si desea agrupar los botones mientras los alinea en una dirección vertical, entonces Bootstrap 5 proporciona la clase .btn-group-vertical que cumplirá esta tarea de inmediato.
Html
Aquí se generarán cuatro botones que se agrupan juntos, además, estos botones tendrán una dirección vertical.
Producción
El grupo de botones se alineó con éxito verticalmente.
Cómo dar un cierto tamaño a los botones agrupados
Para escalar el tamaño de sus grupos de botones hacia arriba y hacia abajo, puede usar las clases de Bootstrap 5 asociadas con el tamaño del grupo de botones, como .BTN-GROUP-SM, .BTN-GROUP-MD, .btn-group-lg, .btn-group-xl.
Html
El código creará tres grupos de botones alineados horizontalmente. El primer grupo de botones tendrá un tamaño grande, el segundo medio y el último pequeño.
Producción
Puede ajustar el tamaño de los grupos de botones dependiendo de cómo haya alineado su otro contenido en el sitio web.
Cómo alinear múltiples grupos de botones en línea
No importa cuántos grupos de botones coloque dentro del contenedor, todos estos se alinearán automáticamente en una dirección horizontal. A continuación hemos demostrado este comportamiento predeterminado de los grupos de botones con la ayuda de un ejemplo.
Html
Aplicando el código anterior, podrá generar dos grupos de botones que estarán alineados por defecto en línea. Puede alinear más grupos de botones en línea si lo desea.
Producción
Así es como alinea múltiples grupos de botones en línea.
Conclusión
Con el fin de agrupar botones utilizando bootstrap 5 use el .clase BTN-Group. Esta clase, junto con la generación de grupos de botones, también los alineará horizontalmente. Mientras tanto, para alinear estos grupos usan verticalmente el .Clase vertical-grupo BTN. Además, si desea dar un tamaño particular a sus grupos de botones, puede usar varias clases como .btn-sm, .btn-md, .btn-lg, etc. Utilizando estas clases, puede crear y peinar fácilmente sus grupos de botones.