Grupos de botones Bootstrap 4

Bootstrap 4 te permite agrupar una serie de botones (en una sola línea) en un grupo de botones:

Grupo de botones en Bootstrap

Utiliza un elemento <div> con la clase .btn-group para crear un grupo de botones:

Ejm

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Consejo: en lugar de aplicar tamaños de botón a cada botón de un grupo, usa la clase .btn-group-lg para un grupo de botones grande o el .btn-group-sm para un grupo de botones pequeño:

Grupos de botones en Bootstrap

Ejm

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Grupos de botones verticales

Bootstrap 4 también soporta grupos de botones verticales

Grupos de botones verticales en Bootstrap

Usamos la clase .btn-group-vertical para crear un grupo de botones vertical:

Ejm

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Grupos de botones de anidación y menús desplegables

Agrupa los grupos de botones para crear menús desplegables.

Grupo de botones desplegables Bootstrap

Ejm

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

Botones desplegables divididos

Botones desplegables divididos en Bootstrap

Ejm

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
  data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Tablet</a>
    <a class="dropdown-item" href="#">Smartphone</a>
  </div>
</div>

Grupo de botones verticales con / desplegable

Grupo de botones vertical con desplegable Bootstrap 4

Ejm

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

Grupos de botones lado a lado

Los grupos de botones están “en línea” de forma predeterminada, lo que los hace aparecer uno al lado del otro cuando tiene varios grupos:

Grupo de botones lado a lado

Ejm

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-primary">BMW</button>
  <button type="button" class="btn btn-primary">Mercedes</button>
  <button type="button" class="btn btn-primary">Volvo</button>
</div>