Grupo de Botões Bootstrap 5

Grupo de botões

Bootstrap 5 permite que você combine um conjunto de botões em um grupo de botões (em uma linha):

Use com .btn-group Da classe <div> Elemento para criar grupos de botões:

Exemplo

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

Experimente pessoalmente

Dica:Não aplique o tamanho do botão a cada botão no grupo, mas use a classe .btn-group-lg Para grupos de botões grandes ou para combinar .btn-group-sm Para grupos de botões pequenos:

Exemplo

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

Experimente pessoalmente

Grupos de botões verticais

Bootstrap 5 também suporta grupos de botões verticais:

Use a classe .btn-group-vertical Crie grupos de botões verticais:

Exemplo

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

Experimente pessoalmente

Grupos de botões alinhados

Por padrão, os grupos de botões são "inline", e vários grupos de botões são exibidos lado a lado ao mesmo tempo:

Exemplo

<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">Great Wall</button>
  <button type="button" class="btn btn-primary">Chery</button>
</div>

Experimente pessoalmente

Grupos de botões aninhados e menus suspensoes

Grupos de botões aninhados, que podem criar menus suspensoes (você aprenderá mais sobre menus suspensoes em capítulos posteriores):

Exemplo

<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="#">Celular</a>
      <a class="dropdown-item" href="#">Tablet</a>
    </div>
  </div>
</div>

Experimente pessoalmente