Ver índice de contenidos del libro

6.3. Grupos de botones

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.

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:

Grupo de botones en Bootstrap 3

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:

Botones en la barra de herramientas en Bootstrap 3

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:

Tamaño de los botones en Bootstrap 3

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:

Botones anidados en Bootstrap 3

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:

Botones verticales en Bootstrap 3

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:

Botones justificados en Bootstrap 3

Figura 6.10 Botones justificados en Bootstrap 3