Bootstrap 4 - Estilos para botones III

Con esta tercera parte terminamos con el tema de los botones de Bootstrap. 

Botones con ancho automático - Bootstrap 4

En ocasiones, puedes necesitar un botón que cubra todo el ancho de un elemento.
Veamos algún ejemplo:

<button type="button" class="btn btn-danger btn-block">Botón de ancho automático</button>

Este ejemplo, está puesto con la clase btn-danger, no obstante, puedes utilizar los otros estilos que hemos visto anteriormente (primary, secondary, warning...).

<button type="button" class="btn btn-primary btn-block">Botón de ancho automático</button>

<button type="button" class="btn btn-secondary btn-block">Botón de ancho automático</button>

<button type="button" class="btn btn-success btn-block">Botón de ancho automático</button>

<button type="button" class="btn btn-danger btn-block">Botón de ancho automático</button>

<button type="button" class="btn btn-warning btn-block">Botón de ancho automático</button>

<button type="button" class="btn btn-info btn-block">Botón de ancho automático</button>

<button type="button" class="btn btn-dark btn-block">Botón de ancho automático</button>

<button type="button" class="btn btn-light btn-block">Botón de ancho automático</button>

Este estilo de botón se queda pegado al borde del elemento web en el cual lo pongas, recomiendo que le apliques un margen con la clase css margin.

Botones de carga (Spinner buttons) - Bootstrap 4

Bootstrap 4 también cuenta con botones animados de carga.
Estos botones los podemos poner en estilo activado en el que se hace un efecto al pasar el cursor sobre el botón y este cambia en forma de mano (como si se tratase de un enlace). El estilo activado, se puede escribir con enabled en la etiqueta button, no obstante, esto está establecido por defecto y no es necesario.
Los botones también se pueden poner con estilo desactivado, en el que el cursor, no cambia de forma al pasar sobre él. 
Por supuesto, el texto "Cargando..." es totalmente personalizable.

<!--PRIMARY SPINNER ENABLED -->

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Cargando...
</button>

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>

<button class="btn btn-primary">
  <span class="spinner-grow spinner-grow-sm"></span>
   Cargando...
</button>

<button class="btn btn-primary">
  <span class="spinner-grow spinner-grow-sm"></span>
</button>

<br>
<br>

<!--PRIMARY SPINNER DISABLED -->

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Cargando...
</button>

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
</button>

<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
   Cargando...
</button>

<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
</button>

<br>
<br>

En este ejemplo de código he puesto solo los estilos primary para no alargar tanto el capítulo. Podrás encontrar el resto de estilos en mi GitHub:

Todos los estilos Spinner Buttons