6.3. Grupos de botones (Bootstrap 3, el manual oficial)

Bootstrap 3 te permite agrupar varios botones relacionados entre sí para mostrarlos en una única línea. Opcionalmente puedes utilizar el plugin de JavaScript para hacer que los botones se comporten como radiobuttons o como checkboxes.

Opciones especiales para los tooltips y popovers dentro de los botones Cuando utilices tooltips o popovers en algún elemento dentro de un .btn-group, tendrás que especificar la opción container: 'body' para evitar efectos indeseados (como por ejemplo que el elemento se haga más ancho o que pierda sus bordes redondeados al ejecutarse el tooltip o el popover).

6.3.1. Ejemplo sencillo

Para crear un grupo de botones, encierra varios botones con la clase .btn dentro de un elemento con la clase .btn-group. Ejemplo:

<div class="btn-group">
  <button type="button" class="btn btn-default">Izquierdo</button>
  <button type="button" class="btn btn-default">Central</button>
  <button type="button" class="btn btn-default">Derecho</button>
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.5 Grupo de botones en Bootstrap 3

6.3.2. Botones en la barra de herramientas

Combinando varios elementos .btn-group puedes crear una toolbar o barra de herramientas basada en botones. Ejemplo:

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>
    <button type="button" class="btn btn-default">3</button>
    <button type="button" class="btn btn-default">4</button>
  </div>

  <div class="btn-group">
      <button type="button" class="btn btn-default">5</button>
      <button type="button" class="btn btn-default">6</button>
      <button type="button" class="btn btn-default">7</button>
  </div>

  <div class="btn-group">
      <button type="button" class="btn">8</button>
  </div>
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.6 Botones en la barra de herramientas en Bootstrap 3

6.3.3. Cambiando el tamaño de los botones

Para cambiar el tamaño de los botones de un grupo, en vez de establecer el tamaño individualmente a cada botón, puedes aplicar las clases .btn-group-* directamente al elemento que agrupa a todos ellos. Ejemplo:

<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.7 Tamaño de los botones en Bootstrap 3

6.3.4. Anidando grupos de botones

Bootstrap 3 también permite mostrar menús desplegables dentro de los grupos de botones. Para ello, incluye un elemento con la clase .btn-group dentro de otro elemento con la clase .btn-group. Ejemplo:

<div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle"
            data-toggle="dropdown">
      Botón Desplegable
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Enlace #1</a></li>
      <li><a href="#">Enlace #2</a></li>
    </ul>
  </div>
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.8 Botones anidados en Bootstrap 3

6.3.5. Grupos de botones verticales

Aplica la clase .btn-group-vertical sobre un grupo de botones para mostrarlos verticalmente en vez de con su estilo horizontal habitual. Ejemplo:

<div class="btn-group-vertical">
  ...
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.9 Botones verticales en Bootstrap 3

6.3.6. Botones justificados

Los grupos de botones también se pueden justificar para que ocupen toda la anchura del elemento en el que se encuentran, haciendo que cada botón ocupe la misma anchura. Para ello, añade la clase .btn-group-justified al grupo de botones. La única limitación es que este comportamiento solo funciona para los elementos <a>, ya que los elementos <button> ignoran estos estilos. Ejemplo:

<div class="btn-group btn-group-justified">
  ...
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.10 Botones justificados en Bootstrap 3