Como usar los Botones en Bootstrap 5

Los botones en bootstrap 5 son un componente con el cual podemos presentar opciones, menus y mucho mas, cuenta con diferentes colores, tamaños, borders y todo se puede mezclar.

Los botones en Bootstrap y em muchos otros frameworks css son muy importantes ya que sirven para los enlaces, los botones en los formularios y cualquier usa que se le quiera dar.

Los primero que tenemos que hacer para usar los botones de bootstrap 5 , claro, descargar bootstrap 5, desde la pagina oficial https://getbootstrap.com/

Una vez descargado e incluido en nuestro documento html vamos a crear nuestro primer boton.

<a href="https://google.com" class="btn btn-secondary">Mi Boton</a>

Como puedes ver el componente, se usa la etiqueta de enlaces, tambien se puede usar el elemento button.

<button class="btn btn-secondary">Mi Boton</button>

Podemos ver el resultado en cambos casos es similar.

Colores de Botones

La clase “btn” nos inicializa el componente boton y la clase “btn-secondary” nos dice el color en este caso es secondary color gris, existen otros colores.

• btn-secondary
• btn-primary
• btn-success
• btn-danger
• btn-warning
• btn-info
• btn-light
• btn-link

En codigo.

<a href="" class="btn btn-secondary">btn-secondary</a>
<a href="" class="btn btn-primary">btn-primary</a>
<a href="" class="btn btn-success">btn-success</a>
<a href="" class="btn btn-danger">btn-danger</a>
<a href="" class="btn btn-warning">btn-warning</a>
<a href="" class="btn btn-info">btn-info</a>
<a href="" class="btn btn-light">btn-light</a>
<a href="" class="btn btn-dark">btn-dark</a>
<a href="" class="btn btn-link">btn-link</a>

Y los podemos ver asi.

Botones Outline

Los anteriores son Botones 100% rellenos de color.tambien bootstrap 5 cuenta con botones que solo tienen el border coloreado y cuando pasamos el mouse sobre el boton este se rellena de color.

Estos son los outline buttons y se pueden poner agregandole a la clase del color el prefijo btn-outline-color por ejemplo.

• btn-outline-secondary
• btn-outline-success
• btn-outline-danger
• btn-outline-warning
• btn-outline-info
• btn-outline-light
• btn-outline-link

<a href="" class="btn btn-outline-secondary">btn-secondary</a>
<a href="" class="btn btn-outline-primary">btn-primary</a>
<a href="" class="btn btn-outline-success">btn-success</a>
<a href="" class="btn btn-outline-danger">btn-danger</a>
<a href="" class="btn btn-outline-warning">btn-warning</a>
<a href="" class="btn btn-outline-info">btn-info</a>
<a href="" class="btn btn-outline-light">btn-light</a>
<a href="" class="btn btn-outline-dark">btn-dark</a>
<a href="" class="btn btn-outline-link">btn-link</a>

Y el resultado es el siguiente:

Tamaños de botones

Tambien existen 3 tamaños que se pueden agregar a las clases, las clases son

• btn-sm: Small o Chico
• btn-md: Mediano por default no es necesario agregarlo
• btn-lg: Large o boton grande

En codigo.

<a href="" class="btn btn-outline-primary btn-sm">btn-primary btn-sm</a>
<a href="" class="btn btn-outline-primary ">btn-primary </a>
<a href="" class="btn btn-outline-primary btn-lg">btn-primary btn-lg</a>

El resultado

Los colores y los tamaños se pueden combinar para obtener resultados personalizados.