Los botones son uno de los elementos más usados en Bootstrap. Vamos a explorar los diferentes tipos y estilos de botones que podemos crear en Bootstrap 5. Programador, programadora, mi nombre es Kiko Palomares y comenzamos.
Tipos de Botones
En Bootstrap, podemos crear una variedad de botones con diferentes colores y estilos. Aquí te muestro algunos ejemplos básicos.
Botones Básicos
Para crear un botón en Bootstrap, utilizamos la clase btn. Luego, añadimos una clase adicional para especificar el color del botón.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Botones en Bootstrap 5</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
<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-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>Botones Outline
Los botones "outline" tienen un borde de color y un fondo transparente. Para crearlos, añadimos la clase btn-outline- seguida del color.
<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-info">Info</button>
<button class="btn btn-outline-light">Light</button>
<button class="btn btn-outline-dark">Dark</button>Tamaños de Botones
Podemos cambiar el tamaño de los botones añadiendo las clases btn-lg para botones grandes y btn-sm para botones pequeños.
<button class="btn btn-primary btn-lg">Large button</button>
<button class="btn btn-primary btn-sm">Small button</button>Botones Deshabilitados
Podemos deshabilitar un botón añadiendo el atributo disabled. Bootstrap aplicará automáticamente el estilo adecuado.
<button class="btn btn-primary" disabled>Disabled button</button>Botones de Toggle
Los botones de toggle son útiles para representar estados activados y desactivados. Utilizamos la clase active para indicar un estado activo y data-bs-toggle="button" para hacer que el botón funcione como toggle.
<button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false">Toggle button</button>
<button type="button" class="btn btn-secondary active" data-bs-toggle="button" aria-pressed="true">Active button</button>Conclusión
Bootstrap 5 nos ofrece una amplia variedad de opciones para trabajar con botones, desde los colores básicos y outline hasta los tamaños y botones deshabilitados. Aquí hemos cubierto los conceptos básicos para que puedas empezar a usar los botones en tus proyectos.
