Tema 9 · Botones y Grupos

Botones Sólidos, Outline y Grupos

Aprende los estilos de botones en Bootstrap 5: variantes sólidas .btn-*, botones con contorno .btn-outline-*, tamaños sm/lg, botones de ancho completo d-grid y agrupación con .btn-group.

Imágenes Fluidas, Miniaturas y Figuras Cajas de Alerta Informativas (Alerts)

La Clase Base .btn y Variantes Sólidas

Para convertir cualquier etiqueta <button>, <a> o <input> en un botón interactivo, siempre debes incluir la clase base .btn seguida de una variante semántica:

Variante Sólida Variante de Contorno (Outline) Propósito Recomendado
.btn-primary .btn-outline-primary Llamadas a la acción principales (CTA, Guardar, Confirmar).
.btn-secondary .btn-outline-secondary Acciones secundarias, volver atrás o cancelar.
.btn-success .btn-outline-success Aprobar, pagar, finalizar o descargar.
.btn-danger .btn-outline-danger Eliminar, rechazar, cerrar sesión o suspender.

Tamaños y Botones de Bloque Completo

  • Botón Grande: .btn .btn-lg (mayor padding y tamaño de fuente).
  • Botón Pequeño: .btn .btn-sm (ideal para tablas o barras de herramientas compactas).
  • Botón de Bloque Completo (100% de ancho): En Bootstrap 5 se eliminó .btn-block. En su lugar se envuelve el botón en un contenedor con .d-grid:
<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Botón de Ancho Completo</button>
</div>

Agrupación de Botones (.btn-group)

Para presentar varias opciones continuas como una sola barra de herramientas unificada sin separación visual entre bordes, usa .btn-group: 

<div class="btn-group" role="group" aria-label="Filtro de Cursos">
  <button type="button" class="btn btn-outline-primary active">Todos</button>
  <button type="button" class="btn btn-outline-primary">Frontend</button>
  <button type="button" class="btn btn-outline-primary">Backend</button>
</div>

⚡ Galería de Botones y Grupos de Herramientas en Bootstrap 5

Compara los botones sólidos, variantes outline con hover automático y la barra de herramientas btn-group:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Botones en Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container" style="max-width: 650px;">
    <div class="card shadow-sm border-0 rounded-4 p-4 bg-white mb-4">
      <h4 class="fw-bold text-dark mb-3">Catálogo de Botones en Kilopolis</h4>

      <!-- 1. Botones Sólidos -->
      <h6 class="text-muted small fw-bold text-uppercase mb-2">Botones Sólidos</h6>
      <div class="d-flex flex-wrap gap-2 mb-3">
        <button class="btn btn-primary" onclick="alert('Acción primaria')">Primario</button>
        <button class="btn btn-success" onclick="alert('Acción completada')">Éxito</button>
        <button class="btn btn-danger" onclick="alert('Acción de riesgo')">Peligro</button>
        <button class="btn btn-dark" onclick="alert('Modo oscuro')">Oscuro</button>
      </div>

      <!-- 2. Botones de Contorno (Outline) -->
      <h6 class="text-muted small fw-bold text-uppercase mb-2">Variantes Outline (.btn-outline-*)</h6>
      <div class="d-flex flex-wrap gap-2 mb-4">
        <button class="btn btn-outline-primary">Outline Azul</button>
        <button class="btn btn-outline-success">Outline Verde</button>
        <button class="btn btn-outline-danger">Outline Rojo</button>
      </div>

      <!-- 3. Grupo de Botones (.btn-group) -->
      <h6 class="text-muted small fw-bold text-uppercase mb-2">Grupo de Opciones (.btn-group)</h6>
      <div class="btn-group mb-4" role="group">
        <button type="button" class="btn btn-primary active">Día</button>
        <button type="button" class="btn btn-outline-primary">Semana</button>
        <button type="button" class="btn btn-outline-primary">Mes</button>
      </div>

      <!-- 4. Botón de Bloque Completo -->
      <div class="d-grid">
        <button class="btn btn-primary btn-lg rounded-pill fw-semibold shadow-sm" onclick="alert('¡Inscripción confirmada!')">
          Inscribirse al Curso Completo &raquo;
        </button>
      </div>
    </div>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de Bootstrap 5.3 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.