Skip to main content Skip to docs navigation
Ver en GitHub

Grupo de botones

Agrupa una serie de botones en una sola línea o apílalos en una columna vertical.

En esta página

Ejemplo básico

Envuelve una serie de botones con .btn en .btn-group.

html 
<div class="btn-group" role="group" aria-label="Ejemplo básico">
  <button type="button" class="btn btn-primary">Izquierda</button>
  <button type="button" class="btn btn-primary">Centro</button>
  <button type="button" class="btn btn-primary">Derecha</button>
</div>

Los grupos de botones requieren un atributo role adecuado y una etiqueta explícita para garantizar que las tecnologías de asistencia, como los lectores de pantalla, identifiquen los botones como agrupados y los anuncien. Utiliza role="group" para grupos de botones o role="toolbar" para barras de herramientas de botones. Luego, utiliza aria-label o aria-labelledby para etiquetarlos.

Estas clases también se pueden agregar a grupos de enlaces, como una alternativa a los componentes de navegación .nav.

Enlace activo Enlace Enlace
html 
<div class="btn-group">
  <a href="#" class="btn btn-primary active" aria-current="page">Enlace activo</a>
  <a href="#" class="btn btn-primary">Enlace</a>
  <a href="#" class="btn btn-primary">Enlace</a>
</div>

Estilos mixtos

html 
<div class="btn-group" role="group" aria-label="Ejemplo básico de estilos mixtos">
  <button type="button" class="btn btn-danger">Izquierda</button>
  <button type="button" class="btn btn-warning">Centro</button>
  <button type="button" class="btn btn-success">Derecha</button>
</div>

Estilos con contorno (outlined)

html 
<div class="btn-group" role="group" aria-label="Ejemplo básico con contorno">
  <button type="button" class="btn btn-outline-primary">Izquierda</button>
  <button type="button" class="btn btn-outline-primary">Centro</button>
  <button type="button" class="btn btn-outline-primary">Derecha</button>
</div>

Grupos de botones de opción y casillas de verificación

Combina botones de alternancia (toggle) de tipo casilla de verificación y de opción en un grupo de botones de aspecto impecable.

html 
<div class="btn-group" role="group" aria-label="Grupo básico de botones de alternancia de tipo casilla de verificación">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">Casilla 1</label>

  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck2">Casilla 2</label>

  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck3">Casilla 3</label>
</div>
html 
<div class="btn-group" role="group" aria-label="Grupo básico de botones de alternancia de tipo botón de opción">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

Barra de herramientas de botones

Combina conjuntos de grupos de botones en barras de herramientas de botones para componentes más complejos. Utiliza clases de utilidad según sea necesario para espaciar grupos, botones y más.

html 
<div class="btn-toolbar" role="toolbar" aria-label="Barra de herramientas con grupos de botones">
  <div class="btn-group me-2" role="group" aria-label="Primer grupo">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group me-2" role="group" aria-label="Segundo grupo">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Tercer grupo">
    <button type="button" class="btn btn-info">8</button>
  </div>
</div>

Siéntete libre de mezclar grupos de entrada con grupos de botones en tus barras de herramientas. Al igual que en el ejemplo anterior, es probable que necesites algunas utilidades para espaciar las cosas correctamente.

html 
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Barra de herramientas con grupos de botones">
  <div class="btn-group me-2" role="group" aria-label="Primer grupo">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon">@</div>
    <input type="text" class="form-control" placeholder="Ejemplo de grupo de entrada" aria-label="Ejemplo de grupo de entrada" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Barra de herramientas con grupos de botones">
  <div class="btn-group" role="group" aria-label="Primer grupo">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon2">@</div>
    <input type="text" class="form-control" placeholder="Ejemplo de grupo de entrada" aria-label="Ejemplo de grupo de entrada" aria-describedby="btnGroupAddon2">
  </div>
</div>

Tamaños

En lugar de aplicar clases de tamaño de botón a cada botón de un grupo, simplemente agrega .btn-group-* a cada .btn-group, incluido cada uno de ellos al anidar múltiples grupos.



html 
<div class="btn-group btn-group-lg" role="group" aria-label="Grupo de botones grandes">
  <button type="button" class="btn btn-outline-primary">Izquierda</button>
  <button type="button" class="btn btn-outline-primary">Centro</button>
  <button type="button" class="btn btn-outline-primary">Derecha</button>
</div>
<br>
<div class="btn-group" role="group" aria-label="Grupo de botones predeterminado">
  <button type="button" class="btn btn-outline-primary">Izquierda</button>
  <button type="button" class="btn btn-outline-primary">Centro</button>
  <button type="button" class="btn btn-outline-primary">Derecha</button>
</div>
<br>
<div class="btn-group btn-group-sm" role="group" aria-label="Grupo de botones pequeños">
  <button type="button" class="btn btn-outline-primary">Izquierda</button>
  <button type="button" class="btn btn-outline-primary">Centro</button>
  <button type="button" class="btn btn-outline-primary">Derecha</button>
</div>

Anidamiento

Coloca un .btn-group dentro de otro .btn-group cuando desees menús desplegables mezclados con una serie de botones.

html 
<div class="btn-group" role="group" aria-label="Grupo de botones con desplegable anidado">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Desplegable
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
      <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
    </ul>
  </div>
</div>

Variación vertical

Haz que un conjunto de botones aparezca apilado verticalmente en lugar de horizontalmente. Los menús desplegables de botones divididos (split buttons) no son compatibles aquí.

html 
<div class="btn-group-vertical" role="group" aria-label="Grupo de botones verticales">
  <button type="button" class="btn btn-primary">Botón</button>
  <button type="button" class="btn btn-primary">Botón</button>
  <button type="button" class="btn btn-primary">Botón</button>
  <button type="button" class="btn btn-primary">Botón</button>
</div>
html 
<div class="btn-group-vertical" role="group" aria-label="Grupo de botones verticales">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Desplegable
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
      <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
    </ul>
  </div>
  <button type="button" class="btn btn-primary">Botón</button>
  <button type="button" class="btn btn-primary">Botón</button>
  <div class="btn-group dropstart" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Desplegable
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
      <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
    </ul>
  </div>
  <div class="btn-group dropend" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Desplegable
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
      <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
    </ul>
  </div>
  <div class="btn-group dropup" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Desplegable
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
      <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
    </ul>
  </div>
</div>
html 
<div class="btn-group-vertical" role="group" aria-label="Grupo de botones verticales de alternancia de tipo botón de opción">
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
  <label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
  <label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
  <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
</div>