Siguiendo con nuestro tutorial en boostrap 4 vamos a ver como se utilizan los botones.

En el siguiente ejemplo podemos ver como se  modifica un un botón típico de html5 utilizando las clases.

• btn; que le indican a bootstrap que se trata de un boton
• btn-[color]; que siguiendo la ya conocida tabla de colores impone un color al botón.

<button type="button" class="btn btn-primary">Enviar</button>
<div class="btn btn-danger">Enviar</div>

Pero este comportamiento puede afectar a cualquier elemento de caja al que le pongamos la clase btn ya que bootstrap 4 lo va considerar un botón como hemos hecho con el div.

Se puede utilizar la clase btn-link para hacer que un botón parezca un link en lugar de usar la clase de color.

Imaginemos que no queremos que el color sea sólido, sino que queremos que solo tenga el borde en el color que necesitamos y que al pasar el ratón por encima se convierta en el color solido. Para ello podemos usar la clase: btn-outline-[color]

<button type="buttom" class="btn btn-outline-success">Aceptar</button>

Modificando el tamaño del botón

Podemos añadir ademas clases de tamaño como:

• btn-lg: boton más grande
• btn-sm: botón más pequeño

<button type="button" class="btn btn-primary btn-lg">Enviar</button>
<div class="btn btn-danger btn-sm">Enviar</div>

Botón en bloque

Si necesitamos que un botón se encuentre en bloque con otro elemento podemos utilzar la clase btn-block, para que ocupe todo el ancho de la caja.

<button type="button" class="btn btn-primary btn-block">Enviar</button>

Activar y desactivar botones

Es posible dejar botones que puedan ser activos o no por medio de las clases active y disable.

Esto nos permitirá poder hacer o no click en el botón. De hecho active marca el botón mas oscuro que su color normal indicando que es el que está activo.

<button type="button" class="btn btn-primary active">Enviar</button>
<div class="btn btn-danger btn-sm disabled">Enviar</div>