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

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

Color secundario

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

Color de éxito

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

Color informativo

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

Color de advertencia

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

Color de peligro

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

Color oscuro

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

Color claro

<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:

<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:

Botones con bordes y sin fondo en Bootstrap

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

Colores para los botones en Bootstrap 4

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:

<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 grandes con Bootstrap

Botones medianos

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

<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 medianos con Bootstrap

Botones pequeños

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

<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:

Botones pequeños con Bootstrap

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:

<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 de tipo bloque con Bootstrap

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:

<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:

Botones deshabilitados con Bootstrap

Ver demo Descargar

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

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(1 votos, promedio: 5 de 5)
Comparte en las redes sociales

3 respuestas a “Botones en Bootstrap 4”

  1. […] Debido a que son botones, también se les puede cambiar el tamaño, colores, bordes, etc. Ver tutorial sobre botones en Bootstrap 4. […]

  2. […] He elegido el color primario con bordes para los ejemplos pero tu puedes escoger cualquier color para tus botones. Ver colores para los botones. […]

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre