Grupo de botones en Bootstrap 5

Los grupos de botones son componentes comunes en las interfaces de usuario web que permiten a los usuarios seleccionar una opción entre varias. Bootstrap 5 proporciona un conjunto de clases y estilos predefinidos para crear fácilmente grupos de botones con diferentes estilos y funcionalidades.

En esta guía, exploraremos en detalle cómo trabajar con grupos de botones en Bootstrap 5, desde la creación de grupos básicos hasta características avanzadas como botones conmutables y grupos de botones verticales, acompañados de ejemplos prácticos para ilustrar su uso.

Creación de Grupos de Botones Básicos

Para crear un grupo básico de botones en Bootstrap 5, puedes utilizar la clase btn-group junto con las clases de botón predefinidas, como btn-primary, btn-secondary, btn-success, entre otras. Aquí tienes un ejemplo básico de un grupo de botones horizontales:


<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Botón 1</button>
  <button type="button" class="btn btn-secondary">Botón 2</button>
  <button type="button" class="btn btn-success">Botón 3</button>
</div>

Lenguaje del código: HTML, XML (xml)

Características Avanzadas de Grupos de Botones en Bootstrap 5

Botones conmutables

Los botones conmutables son una forma de permitir que los usuarios seleccionen una sola opción de un conjunto. Bootstrap 5 proporciona una clase específica btn-group-toggle para crear grupos de botones conmutables. Aquí tienes un ejemplo de un grupo de botones conmutables:


<div class="btn-group" role="group" aria-label="Button toggle example">
  <input type="radio" class="btn-check" name="btn-toggle" id="btn1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btn1">Opción 1</label>

  <input type="radio" class="btn-check" name="btn-toggle" id="btn2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btn2">Opción 2</label>

  <input type="radio" class="btn-check" name="btn-toggle" id="btn3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btn3">Opción 3</label>
</div>

Lenguaje del código: HTML, XML (xml)

Grupos de Botones Verticales

También puedes crear grupos de botones verticales en Bootstrap 5 utilizando la clase btn-group-vertical. Esto es útil cuando se necesita más espacio vertical en el diseño. Aquí tienes un ejemplo de un grupo de botones verticales:


<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-primary">Botón 1</button>
  <button type="button" class="btn btn-secondary">Botón 2</button>
  <button type="button" class="btn btn-success">Botón 3</button>
</div>

Lenguaje del código: HTML, XML (xml)

Ejemplos Prácticos

Grupo de Botones Básico


<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Botón 1</button>
  <button type="button" class="btn btn-secondary">Botón 2</button>
  <button type="button" class="btn btn-success">Botón 3</button>
</div>

Lenguaje del código: HTML, XML (xml)

Grupo de Botones Conmutables


<div class="btn-group" role="group" aria-label="Button toggle example">
  <input type="radio" class="btn-check" name="btn-toggle" id="btn1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btn1">Opción 1</label>

  <input type="radio" class="btn-check" name="btn-toggle" id="btn2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btn2">Opción 2</label>

  <input type="radio" class="btn-check" name="btn-toggle" id="btn3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btn3">Opción 3</label>
</div>

Lenguaje del código: HTML, XML (xml)

Grupo de Botones Verticales


<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-primary">Botón 1</button>
  <button type="button" class="btn btn-secondary">Botón 2</button>
  <button type="button" class="btn btn-success">Botón 3</button>
</div>

Lenguaje del código: HTML, XML (xml)

Conclusiones

Los grupos de botones en Bootstrap 5 son componentes versátiles que te permiten crear interfaces de usuario interactivas y funcionales. Desde la creación de grupos básicos de botones hasta características avanzadas como botones conmutables y grupos de botones verticales, Bootstrap 5 facilita la creación de experiencias de usuario consistentes y atractivas.

Con esta guía y ejemplos prácticos, ahora estás equipado para utilizar grupos de botones de manera efectiva en tus proyectos web con Bootstrap 5. ¡Experimenta con diferentes estilos y funcionalidades para mejorar la interactividad de tus aplicaciones web!