Botones en Bootstrap 4

1. Estilos de botones

Bootstrap 4 nos ofrece diferentes clases para darle estilo a nuestros botones: btn, btn-primary, btn-secondary, btn-success, btn-info, btn-warning, btn-danger, btn-dark, btn-light y btn btn-link.

En primer lugar debemos incluir la clase btn y después podemos combinarla con el resto de clases. Las clases de botón se pueden usar sobre enlaces, botones o inputs.

Ejemplo:

Sdefault

2. Botones con contorno

Tenemos también clases para darle contorno a los botones: btn-outline-primary, btn-outline-secondary, btn-outline-success, btn-outline-info, btn-outline-warning, btn-outline-danger, btn-outline-dark y btn-outline-light.

Ejemplo:

default

3. Botones y sus tamaños

Disponemos de diferentes clases para definir el tamaño de los botones: btn-sm, btn-lg y btn-block.

Ejemplo:

default

4. Botones activados y desactivados

Para que un botón aparezca activado o desactivado utilizamos las siguientes clases: .active y .disabled. Se pueden usar para botones, inputs y enlaces.

Ejemplo:

default

5. Grupos de botones

Para hacer grupos de botones de forma horizontal utilizamos la clase .btn-group y de forma vertical utililzamos la clase .btn-group-vertical.

Ejemplo:

default

6. Botones desplegables o dropdown

Podemos hacer botones desplegables utilizando la etiqueta <button>, las clases anteriormente vistas e incluyendo nuevos componentes.

• Botones desplegables: https://getbootstrap.com/docs/4.4/components/dropdowns/

Comprueba tu aprendizaje