Grupo de botones Bootstrap 5

Grupo de botones

Bootstrap 5 le permite combinar un conjunto de botones en un grupo de botones (en una línea):

Utilice las clases con .btn-group de la clase <div> elementos para crear grupos de botones:

Ejemplo

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Pruebe personalmente

Consejo:No aplique el tamaño de los botones a cada botón del grupo, sino que utilice la clase .btn-group-lg Para grupos de botones grandes o para .btn-group-sm Para grupos de botones pequeños:

Ejemplo

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Pruebe personalmente

Grupos de botones verticales

Bootstrap 5 también admite grupos de botones verticales:

Por favor, utilice la clase .btn-group-vertical Crear un grupo de botones vertical:

Ejemplo

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Pruebe personalmente

Grupos de botones alineados

Por defecto, los grupos de botones son "inline", y se muestran en paralelo cuando hay varios grupos de botones:

Ejemplo

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">Geely</button>
  <button type="button" class="btn btn-primary">Changcheng</button>
  <button type="button" class="btn btn-primary">Hongqi</button>
</div>

Pruebe personalmente

Grupos de botones anidados y menús desplegables

Grupos de botones anidados, que pueden crear menús desplegables (más información sobre los menús desplegables se aprenderá en los capítulos posteriores):

Ejemplo

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Xiaomi</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Teléfono</a>
      <a class="dropdown-item" href="#">Tableta</a>
    </div>
  </div>
</div>

Pruebe personalmente