separador

BUTTONS

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.

Ejemplo

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>

Resultado



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>

Resultado



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-*.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>

Resultado






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>

Resultado