Botones en Bootstrap 5: clases para darles estilo

Los botones son elementos fundamentales en cualquier diseño web, ya que permiten a los usuarios interactuar con tu contenido de manera intuitiva y efectiva. Bootstrap 5 ofrece una amplia variedad de clases que te permiten personalizar los botones de acuerdo con tus necesidades y preferencias.

Con las clases de Bootstrap 5, puedes cambiar el color de fondo, el color del texto, el tamaño, la forma y el estilo de los botones. También puedes agregar iconos, sombras y bordes para resaltar los botones y hacer que se destaquen en tu diseño.

Además de las clases predefinidas, Bootstrap 5 te permite crear botones personalizados utilizando tu propio CSS. Esto te da la libertad de diseñar botones únicos y originales que se adapten perfectamente a la identidad visual de tu sitio web.

En esta sección del tutorial, te mostraremos las diferentes clases disponibles en Bootstrap 5 para dar estilo a los botones, así como ejemplos prácticos de cómo utilizarlas. Aprenderás a crear botones con diferentes estilos y efectos, y descubrirás cómo utilizar estas clases de manera efectiva para mejorar la experiencia del usuario en tu sitio web.

11. Clases para dar estilo a los botones en Bootstrap 5

En Bootstrap 5, puedes crear botones de diversas formas y tamaños utilizando diferentes clases. 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. Además se pueden combinar clases y usar otras clases de utilidad de Bootstrap para espaciar los elementos, crear columnas como contenedores padre de los botones, etc. Veamos las clases más relevantes para dar estilo a los botones.

Clase	Descripción
.btn	Clase base para dar estilo a un botón.
.btn-primary	Estilo para resaltar la acción principal.
.btn-secondary	Estilo para una acción secundaria.
.btn-success	Estilo para indicar una acción exitosa.
.btn-danger	Estilo para indicar una acción peligrosa o de error.
.btn-warning	Estilo para indicar una acción de advertencia.
.btn-info	Estilo para indicar una acción informativa.
.btn-light	Estilo para un botón con fondo claro.
.btn-dark	Estilo para un botón con fondo oscuro.
.btn-link	Estilo para un botón que se parece a un enlace.
.btn-outline-primary	Botón con borde y texto en color primario.
.btn-outline-secondary	Botón con borde y texto en color secundario.
.btn-outline-success	Botón con borde y texto en color de éxito.
.btn-outline-danger	Botón con borde y texto en color de peligro o error.
.btn-outline-warning	Botón con borde y texto en color de advertencia.
.btn-outline-info	Botón con borde y texto en color de información.
.btn-outline-light	Botón con borde y texto en color claro.
.btn-outline-dark	Botón con borde y texto en color oscuro.
.btn-lg	Tamaño grande para el botón.
.btn-sm	Tamaño pequeño para el botón.
.disabled	Deshabilita el botón para que no se pueda hacer clic.
.active	Muestra el botón en un estado activo, útil para indicar que la acción está actualmente seleccionada.
.btn-group	Agrupa un conjunto de botones horizontalmente.
.btn-group-vertical	Agrupa un conjunto de botones verticalmente.
.btn-toolbar	Agrupa un conjunto de botones y barras de herramientas.

11.1. Botones clásicos

Bootstrap 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. Ejemplo:

<button class="btn">Basic</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-link">Link</button>
<a href="#" class="btn btn-info" role="button">Link Button</a>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

Ejemplo

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

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Ejemplo

11.3. Botones y sus tamaños

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

<button type="button" class="btn btn-sm">btn-sm</button>
<button type="button" class="btn btn-lg">btn-lg</button>

En el caso de necesitar un botón que se ajuste al ancho del contenedor, llamado botón de tipo bloque o «block button«, crearemos un contenedor padre con la clase .d-grid y podemos usar .gap-x, donde x es un número que define su espaciado, y en su interior definiremos los botones. Como es de esperar, se pueden usar todas las propiedades de Bootstrap para crear columnas y rejillas y en su interior definir los botones. Ejemplo:

<div class="d-grid gap-2">
  <button class="btn" type="button">Botón tipo bloque</button>
</div>

En el ejemplo anterior, la clase d-grid se utiliza para crear un contenedor de cuadrícula alrededor del botón, y gap-2 establece un espacio de 2 unidades entre el botón y los bordes del contenedor.

Clases d-grid y gap-x

1. d-grid (Display Grid):

• Bootstrap utiliza la clase d-grid para aplicar la propiedad CSS display: grid a un elemento. La propiedad display: grid convierte el elemento en un contenedor de cuadrícula, lo que permite organizar sus elementos hijos en filas y columnas.
• Cuando aplicas d-grid a un elemento, este se convierte en un contenedor flexible que te permite controlar la disposición de sus elementos internos mediante una cuadrícula. Ejemplo:

   <div class="d-grid">
     <!-- Elementos hijos se organizarán en una cuadrícula -->
   </div>

2. gap-x (Gap):

• La clase gap-x, donde «x» es un número que representa la cantidad de unidades de espacio entre las celdas de la cuadrícula, se utiliza para establecer un espacio entre los elementos hijos de un contenedor de cuadrícula creado con display: grid.
• La propiedad gap es introducida en CSS Grid Layout para definir el espacio entre las filas y columnas de la cuadrícula. Ejemplo:

   <div class="d-grid gap-2">
     <!-- Elementos hijos con un espacio de 2 unidades entre ellos -->
   </div>

Ejemplo

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

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>

11.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. Además, se pueden utilizar las clases vistas anteriormente para darle color a los botones, para ,modificar su tamaño, etc. Ejemplo:

<div class="btn-group">
  <button type="button" class="btn btn-info">Diseño</button>
  <button type="button" class="btn btn-primary">Desarrollo</button>
  <button type="button" class="btn btn-info">Marketing</button>
</div>
<div class="btn-group-vertical">
  <button type="button" class="btn btn-warning">Diseño</button>
  <button type="button" class="btn btn-primary">Desarrollo</button>
  <button type="button" class="btn btn-danger">Marketing</button>
</div>

Puedes combinar grupos de botones con la clase .btn-toolbar. Ejemplo:

<div class="btn-toolbar">
  <div class="btn-group me-2">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
</div>

Ejemplo

En la siguiente sección veremos las clases para dar estilo a bordes, padding y margin en Bootstrap 5.

Comprueba tu apendizaje