Agrupe una serie de botones juntos en una sola linea con el grupo de botones
Utiliza el elemento <div> con la class.btn-group para crear un grupo de botones
Ejemplo de Button group
<div class="btn-group"<<button type="button" class="btn btn-primary"<Boton 1</button<
<button type="button" class="btn btn-primary"<Boton 2</button<
<button type="button" class="btn btn-primary"<Boton 3</button<
</div<
Button toolbar
Combine un conjunto de grupos de botones en barras de herramientas de botones para componentes mas elaborados. Utilice las class de utilidad segun sea necesario para espaciar grupos y botones.Ejemplo de Button toolbar
<div class="btn-toolbar" role="toolbar"<<div class="btn-group mr-2" role="group"<
<button type="button" class="btn btn-secondary"<Boton 1</button<
<button type="button" class="btn btn-secondary"<Boton 2</button<
<button type="button" class="btn btn-secondary"<Boton 3</button<
<button type="button" class="btn btn-secondary"<Boton 4</button<
</div<
<div class="btn-group mr-2" role="group"<
<button type="button" class="btn btn-secondary"<Boton 5</button<
<button type="button" class="btn btn-secondary"<Boton 6</button<
<button type="button" class="btn btn-secondary"<Boton 7</button<
</div<
<div class="btn-group" role="group"<
<button type="button" class="btn btn-secondary">Boton 8</button<
</div<
</div<
Nesting
Coloca un grupo.btn dentro de otro grupo .btn cuando desee que los menus desplegables se mezclen con una serie de botones.
Sizing
En lugar de aplicar clases de tamaño de boton a cada boton de un grupo, simplemente añadabtn-group-* a cada grupo .btn, incluyendo cada uno al anidar varios grupos.
Ejemplo de Sizing
<div class="btn-group btn-group-lg" role="group" <...</div<<div class="btn-group" role="group"<...</div<
<div class="btn-group btn-group-sm" role="group"<...</div<
Dentro de cada div va los diferentes botones que quedemos agrupar
Tooltips y popovers
Debido a la implementacion especifica (y algunos otros componentes), se requiere un poco de envolvente especial para los tooltips y popovers dentro de los button groups.Tendras que especificar el contenedor de opciones: body para evitar efectos secundarios no deseados (como que el elemento crece mas ancho y / o pierde sus esquinas redondeadas cuando se activa la informacion de herramientas o popover).
Variacion Vertical
Haga que un conjunto de botones aparezca apilado verticalmente en lugar de horizontalmente. Los botones desplegables de los botones de division no se admiten en este caso.Ejemplo de variacion vertical
<div class="btn-group-vertical"<Aqui se incluye los grupos de botones
</div< Fecha actualización el 2021-10-26. Fecha publicación el 2017-10-26. Categoría: Bootstrap. Autor: Oscar olg Mapa del sitio
