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.

Source code

<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:

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.

Source code

<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:

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

Source code

<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:

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

Source code

<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 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:

Source code

<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:

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!