Botones

Para crear botones Bootstrap 4 propone utilizar la etiqueta "button", "a" o "input" y define una serie de clases.

Siempre se debe asignar la clase btn y alguna de las otras clases con un significado propio indicado por su color:

btn-primary:: Es un botón que se destaca entre un conjunto de botones.
btn-secondary:: Es un botón no tan importante como btn-primary.
btn-success:: Se utiliza para indicar una acción exitosa.
btn-info:: Es un botón para información.
btn-warning:: Es un botón que informa que hay que tener cuidado con la acción que tiene asociado el botón.
btn-danger:: Indica que la acción que tiene asociado el botón es peligrosa.
btn-dark:: Muestra un botón oscuro.
btn-light:: Muestra un botón claro.
btn-link:: Convierte al botón como un hipervínculo, haciendo que disminuya su importancia.

Bootstrap 4 dispone los mismos botones y significados pero con solo pintando su contorno por medio de las clases (menos el de btn-link):

En bootstrap 4 hay dos clases más de tamaños aparte del estándar:

Indistintamente del tamaño del botón disponemos de una clase btn-block que expande a todo el ancho del contenedor.

Si hay un elemento HTML button que se desea mostrar como desactivo se debe agregar la propiedad disabled

Grupo de botones

Boostrap provee la posibilidad de agrupar un conjunto de botones mediante la clase "btn-group". Los botones se agrupan pegados en la misma fila.

En algunas situaciones se pueden agrupar un conjunto de grupos de botones y crear una barra de herramientas.

Para ello se debe agrupar un conjunto de "btn-group" encerrando los mismos en un div definiendo la clase ""btn-toolbar":

Para definir tamaños de los botones en forma conjunta para un grupo de botones existen las siguientes clases:

Otra clase relacionada a los grupos de botones es "btn-group-vertical", la misma dispone los botones en forma vertical.