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