Grupo de botones en Bootstrap 4

En este artículo vas a descubrir como funcionan los grupos de botones usando Bootstrap 4. Vas a aprender a agrupar una serie de botones en una sola línea con el grupo de botones que Bootstrap tiene preparado para ti. Botones horizontales, verticales y con distintos tamaños.

La idea es crear varios botones juntos reunidos en una especie de botonera con un diseño agrupado.

Código de ejemplo de un grupo de botones

Grupo de botones con color primario y bordes.

<div class="btn-group">
    <button type="button" class="btn btn-outline-primary">1</button>
    <button type="button" class="btn btn-outline-primary">2</button>
    <button type="button" class="btn btn-outline-primary">3</button>
    <button type="button" class="btn btn-outline-primary">4</button>
</div>

Para conseguir como resultado:

Grupo de botones con Bootstrap 4

He elegido el color primario con bordes para los ejemplos pero tu puedes escoger cualquier color para tus botones. Ver colores para los botones.

Incluso, también puedes darle tus propios estilos.

Tamaños para los grupos de botones

Para los grupos de botones hay 3 tamaños:

Agrega un grupo de botones de tamaño grande usando la clase .btn-group-lg.

<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-outline-primary">1</button>
    <button type="button" class="btn btn-outline-primary">2</button>
    <button type="button" class="btn btn-outline-primary">3</button>
    <button type="button" class="btn btn-outline-primary">4</button>
</div>

Para conseguir como resultado:

Grupo de botones de tamaño grande en Bootstrap 4

El tamaño mediano es el tamaño por defecto. Se consigue así:

<div class="btn-group">
    <button type="button" class="btn btn-outline-primary">1</button>
    <button type="button" class="btn btn-outline-primary">2</button>
    <button type="button" class="btn btn-outline-primary">3</button>
    <button type="button" class="btn btn-outline-primary">4</button>
</div>

Para conseguir como resultado:

Grupo de botones mediano en Bootstrap 4

Y solo queda el tamaño pequeño, que lo puedes conseguir de la siguiente forma:

<div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-outline-primary">1</button>
    <button type="button" class="btn btn-outline-primary">2</button>
    <button type="button" class="btn btn-outline-primary">3</button>
    <button type="button" class="btn btn-outline-primary">4</button>
</div>

Para conseguir como resultado:

Grupo de botones de tamaño pequeño en Bootstrap 4

Grupo de botones de forma vertical

El grupo de botones también se puede orientar verticalmente. Para ello puedes usar la clase .btn-group-vertical en el elemento padre de los botones.

Por ejemplo:

<div class="btn-group-vertical">
    <button type="button" class="btn btn-outline-primary">1</button>
    <button type="button" class="btn btn-outline-primary">2</button>
    <button type="button" class="btn btn-outline-primary">3</button>
    <button type="button" class="btn btn-outline-primary">4</button>
</div>

Para conseguir como resultado:

Grupos de botones en posición vertical en Bootstrap 4

Conclusiones

Los grupos de botones se pueden emplear para barras de herramientas, reproductores de música, reproductores de vídeo, paginación de resultados y editores de texto totalmente personalizados y para todo lo que se te pueda ocurrir.

Se trata de un buen recurso para construir botoneras a medida y es muy fácil darle uso.

Espero que te haya servido y lo puedas aplicar en tus proyectos!

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(2 votos, promedio: 5 de 5)
Comparte en las redes sociales

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre