grupos de botones en bootstrap 4

Podemos crear grupos de botones en bootstrap 4, esto nos dará mucha más funcionalidad y opciones a la hora de plantear nuestros desarrollos, para ello lo único que tenemos que hacer es poner los botones dentro de un div con la clase btn-group.

<div class="btn-group">
	<button type="button" class="btn btn-primary">MAC</button>
	<button type="button" class="btn btn-primary">Widow</button>
	<button type="button" class="btn btn-primary">Linux</button>
</div>

Esto nos coloca los botones en una especie de barra de navegación con los estilos de los botones.

El tamaño del grupo se puede cambiar añadiendo al div las clases btn-grup-lg, btn-group-sm, btn-group-xs.

Si queremos que sea vertical, añadiremos la clase btn-group-vertical:

<div class="btn-group btn-group-lg btn-group-vertical">
	<button type="button" class="btn btn-primary">MAC</button>
	<button type="button" class="btn btn-primary">Widow</button>
	<button type="button" class="btn btn-primary">Linux</button>
</div>



Con este tipo de “navegación” podemos anidar elementos de la siguiente forma:

<div class="btn-group">
	<button type="button" class="btn btn-primary">MAC</button>
	<div class="btn-group">
		<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Widow</button>
		<div class="dropdown-menu">
			<a href="#" class="dropdown-item">Windows 8</a>
			<a href="#" class="dropdown-item">Windows 10</a>
		</div>
	</div>
	<button type="button" class="btn btn-primary">Linux</button>
</div>

En este caso lo que estamos haciendo es decirle a bootstrap que cree un grupo de botones dentro de otro grupo y que el primer elemento sea desplegable por medio de dropdown-toggle y añadiendo el iconito de la flecha.

Después declaramos el menú de los elementos desplegables por medio de dropdown-menu y a cada elemento le añadimos la clase dropdown-item, señalando que es un item del espacio desplegable.