BUTTON COMPONENTE EN BOOTSTRAP 4

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ñada btn-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 2017-10-26. Fecha publicación el 2017-10-26. Categoría: Bootstrap. Autor: Oscar olg Mapa del sitio
componente Button