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.

Leave a comment