Botones en Bootstrap 4

En este artículo vas descubrir los diferentes estilos y usos que puedes dar a los botones utilizando Bootstrap.

Descubrirás todas las clases que se puede utilizar para darle diferentes estilos, colores y tamaños personalizados ya pre-diseñados y preparados para usar.

Los botones son ideales para permitir realizar acciones al usuario en nuestra página web. Un botón puede ser un simple botón (que permita ejecutar alguna acción JavaScript), un botón de tipo «submit» para enviar un formulario o un enlace.

El diseño que Bootstrap tiene preparado para los botones se puede aplicar indistintamente a los elementos HTML: <button>, <a>, <input>.

Colores que puedes utilizar para los botones en Bootstrap

Bootstrap dispone de 7 colores pre-diseñados para que puedas utilizarlos en tus desarrollos web:

Color primario

Source code

<button type="button" class="btn btn-primary">Primario</button>

Color secundario

Source code

<button type="button" class="btn btn-secondary">Secundario</button>

Color de éxito

Source code

<button type="button" class="btn btn-success">Éxito</button>

Color informativo

Source code

<button type="button" class="btn btn-info">Información</button>

Color de advertencia

Source code

<button type="button" class="btn btn-warning">Advertencia</button>

Color de peligro

Source code

<button type="button" class="btn btn-danger">Peligro</button>

Color oscuro

Source code

<button type="button" class="btn btn-dark">Oscuro</button>

Color claro

Source code

<button type="button" class="btn btn-light">Claro</button>

Botones con el estilo inverso

En este caso, Bootstrap tiene otra clase que permite agregar botones sin fondo y con un borde del color pre-diseñado. Usa la clase .btn-outline-*.

(*) Color pre-diseñado.

Por ejemplo:

Source code

<button type="button" class="btn btn-outline-primary">Primario</button>
<button type="button" class="btn btn-outline-secondary">Secundario</button>
<button type="button" class="btn btn-outline-success">Éxito</button>
<button type="button" class="btn btn-outline-info">Información</button>
<button type="button" class="btn btn-outline-warning">Advertencia</button>
<button type="button" class="btn btn-outline-danger">Peligro</button>
<button type="button" class="btn btn-outline-link">Enlace</button>
<button type="button" class="btn btn-outline-dark">Oscuro</button>
<button type="button" class="btn btn-outline-light">Claro</button>

Para obtener como resultado:

En la siguiente imagen puedes ver como se muestran en pantalla:

Todas estas clases se pueden utilizar de forma rápida para darle un color y diseño a un botón. Si no se adapta a tus necesidades siempre puedes crear tu propia clase, arreglársela al botón y agregarle tus estilos personalizados.

Tamaños de los botones

Bootstrap tiene 3 tamaños pre-diseñados que pueden ser útiles en diferentes escenarios.

Botones largos

Usa la clase .btn-lg del siguiente modo:

Source code

<button type="button" class="btn btn-primary btn-lg">Primario</button>
<button type="button" class="btn btn-secondary btn-lg">Secundario</button>

Para mostrar los botones con siguiente tamaño:

Botones medianos

Los botones medianos son los botones por defecto. Usa la clase .btn-md del siguiente modo:

Source code

<button type="button" class="btn btn-primary btn-md">Primario</button>
<button type="button" class="btn btn-secondary btn-md">Secundario</button>

Para mostrar los botones con el siguiente tamaño:

Botones pequeños

Para agregar un botón pequeño puedes usar la clase .btn-sm del siguiente modo:

Source code

<button type="button" class="btn btn-primary btn-sm">Primario</button>
<button type="button" class="btn btn-secondary btn-sm">Secundario</button>

Para mostrar los botones con el siguiente tamaño:

Esto de los tamaños puede ser ideal para considerar los distintos tamaños de los botones en los distintos tamaños de los dispositivos.

Botones de tipo bloque

Con Bootstrap puedes crear botones de tipo bloque para que abarque todo el ancho del elemento primario agregando la clase .btn-block.

A continuación, el código para unos botones largos y de tipo bloque:

Source code

<button type="button" class="btn btn-primary btn-lg btn-block">Primario</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Secundario</button>

Para conseguir como resultado botones que ocupan todo el ancho del contenedor padre:

Botones deshabilitados

Para los botones deshabilitados o sin acción, con el atributo «disabled», Bootstrap también tiene preparado un diseño que los muestra con un aspecto más apagado.

Por ejemplo:

Source code

<button type="button" class="btn btn-primary" disabled>Primario</button>
<button type="button" class="btn btn-secondary" disabled>Secundario</button>
<button type="button" class="btn btn-success" disabled>Éxito</button>
<button type="button" class="btn btn-info" disabled>Información</button>
<button type="button" class="btn btn-warning" disabled>Advertencia</button>
<button type="button" class="btn btn-danger" disabled>Peligro</button>
<button type="button" class="btn btn-link" disabled>Enlace</button>

Para obtener como resultado:

Ver demo Descargar

Ver más información sobre los botones en Bootstrap 4