Grupo de botones

Agrupa una serie de botones en una sola línea o apílalos en una columna vertical.

Ejemplo básico

Envuelve una serie de botones con .btn en .btn-group.

HTML

<div class="btn-group" role="group" aria-label="Ejemplo básico">
    <button type="button" class="btn btn-primary">Izquierda</button>
    <button type="button" class="btn btn-primary">Medio</button>
    <button type="button" class="btn btn-primary">Derecha</button>
</div>

Los grupos de botones requieren un atributo role apropiado y una etiqueta explícita para garantizar que las tecnologías de asistencia, como los lectores de pantalla, identifiquen los botones como agrupados y los anuncien. Utiliza role="group" para grupos de botones o role="toolbar" para barras de herramientas de botones. Luego usa aria-label o aria-labelledby para etiquetarlos.

Estas clases también se pueden agregar a grupos de enlaces, como alternativa al .nav componentes de navegación.

HTML

<div class="btn-group">
    <a href="#" class="btn btn-primary active" aria-current="page">Enlace activo</a>
    <a href="#" class="btn btn-primary">Enlace</a>
    <a href="#" class="btn btn-primary">Enlace</a>
</div>

Estilos mixtos

HTML

<div class="btn-group" role="group" aria-label="Ejemplo básico de estilos mixtos">
    <button type="button" class="btn btn-danger">Izquierda</button>
    <button type="button" class="btn btn-warning">Medio</button>
    <button type="button" class="btn btn-success">Derecha</button>
</div>

Estilos outlined

HTML

<div class="btn-group" role="group" aria-label="Ejemplo básico outlined">
    <button type="button" class="btn btn-outline-primary">Izquierda</button>
    <button type="button" class="btn btn-outline-primary">Medio</button>
    <button type="button" class="btn btn-outline-primary">Derecha</button>
</div>

Grupos de casillas de verificación y botones de opción

Combina botones de casilla de verificación y radio con forma de botones de alternancia en un grupo de botones de apariencia perfecta.

HTML

<div class="btn-group" role="group" aria-label="Grupo de botones de alternancia de casilla de verificación básico">
    <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck1">Casilla 1</label>
 
    <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck2">Casilla 2</label>
 
    <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck3">Casilla 3</label>
</div>

HTML

<div class="btn-group" role="group" aria-label="Grupo básico de botones de alternancia de radio">
    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked="">
    <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
 
    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
 
    <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

Barra de herramientas de botones

Combina conjuntos de grupos de botones en barras de herramientas de botones para obtener componentes más complejos. Utiliza clases de utilidad según sea necesario para espaciar grupos, botones y más.

HTML

<div class="btn-toolbar" role="toolbar" aria-label="Barra de herramientas con grupos de botones">
    <div class="btn-group me-2" role="group" aria-label="Primer grupo">
        <button type="button" class="btn btn-primary">1</button>
        <button type="button" class="btn btn-primary">2</button>
        <button type="button" class="btn btn-primary">3</button>
        <button type="button" class="btn btn-primary">4</button>
    </div>
    <div class="btn-group me-2" role="group" aria-label="Segundo grupo">
        <button type="button" class="btn btn-secondary">5</button>
        <button type="button" class="btn btn-secondary">6</button>
        <button type="button" class="btn btn-secondary">7</button>
    </div>
    <div class="btn-group" role="group" aria-label="Tercer grupo">
        <button type="button" class="btn btn-info">8</button>
    </div>
</div>

Siéntete libre de mezclar grupos de entrada con grupos de botones en tus barras de herramientas. Al igual que en el ejemplo anterior, es probable que necesites algunas utilidades para espaciar las cosas correctamente.

» Aprende más sobre ↗

HTML

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Barra de herramientas con grupos de botones">
    <div class="btn-group me-2" role="group" aria-label="Primer grupo">
        <button type="button" class="btn btn-outline-secondary">1</button>
        <button type="button" class="btn btn-outline-secondary">2</button>
        <button type="button" class="btn btn-outline-secondary">3</button>
        <button type="button" class="btn btn-outline-secondary">4</button>
    </div>
    <div class="input-group">
        <div class="input-group-text" id="btnGroupAddon">@</div>
        <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
    </div>
</div>
 
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Barra de herramientas con grupos de botones">
    <div class="btn-group" role="group" aria-label="Primer grupo">
        <button type="button" class="btn btn-outline-secondary">1</button>
        <button type="button" class="btn btn-outline-secondary">2</button>
        <button type="button" class="btn btn-outline-secondary">3</button>
        <button type="button" class="btn btn-outline-secondary">4</button>
    </div>
    <div class="input-group">
        <div class="input-group-text" id="btnGroupAddon2">@</div>
        <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
    </div>
</div>

Tamaños

En lugar de aplicar clases de tamaño de botones a cada botón de un grupo, simplemente agrega .btn-group-* a cada .btn-group, incluyendo cada uno cuando se anidan varios grupos.

HTML

<div class="btn-group btn-group-lg" role="group" aria-label="Grupo de botones grandes">
    <button type="button" class="btn btn-outline-primary">Izquierda</button>
    <button type="button" class="btn btn-outline-primary">Medio</button>
    <button type="button" class="btn btn-outline-primary">Derecha</button>
</div>
<br>
<div class="btn-group" role="group" aria-label="Grupo de botones predeterminado">
    <button type="button" class="btn btn-outline-primary">Izquierda</button>
    <button type="button" class="btn btn-outline-primary">Medio</button>
    <button type="button" class="btn btn-outline-primary">Derecha</button>
</div>
<br>
<div class="btn-group btn-group-sm" role="group" aria-label="Grupo de botones pequeños">
    <button type="button" class="btn btn-outline-primary">Izquierda</button>
    <button type="button" class="btn btn-outline-primary">Medio</button>
    <button type="button" class="btn btn-outline-primary">Derecha</button>
</div>

Anidamiento

Coloca un .btn-group dentro de otro .btn-group cuando quieras menús desplegables mezclados con una serie de botones.

HTML

<div class="btn-group" role="group" aria-label="Grupo de botones con menú desplegable anidado">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
 
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
            aria-expanded="false">
            Desplegable
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
            <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
        </ul>
    </div>
</div>

Variación vertical

Haz que un conjunto de botones aparezcan apilados verticalmente en lugar de horizontalmente. Aquí no se admiten menús desplegables de botones divididos.

HTML

<div class="btn-group-vertical" role="group" aria-label="Grupo de botones verticales">
    <button type="button" class="btn btn-primary">Botón</button>
    <button type="button" class="btn btn-primary">Botón</button>
    <button type="button" class="btn btn-primary">Botón</button>
    <button type="button" class="btn btn-primary">Botón</button>
</div>

» Aprende más sobre ↗

HTML

<div class="btn-group-vertical" role="group" aria-label="Grupo de botones verticales">
    <button type="button" class="btn btn-primary">Botón</button>
    <button type="button" class="btn btn-primary">Botón</button>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Desplegable
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
            <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
        </ul>
    </div>
    <div class="btn-group dropstart" role="group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Desplegable
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
            <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
        </ul>
    </div>
    <div class="btn-group dropend" role="group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Desplegable
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
            <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
        </ul>
    </div>
    <div class="btn-group dropup" role="group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Desplegable
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
            <li><a class="dropdown-item" href="#">Enlace desplegable</a></li>
        </ul>
    </div>
</div>

HTML

<div class="btn-group-vertical" role="group" aria-label="Grupo de botones de alternancia vertical">
    <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked="">
    <label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
    <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
    <label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
    <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
    <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
</div>

» Aprende más sobre ↗

Botones Tarjetas