📌 Tutorial: Cómo crear este Modal con Bootstrap
En este tutorial aprenderás a crear un modal en Bootstrap con un formulario de inicio de sesión y una imagen de usuario.
1️⃣ Incluir Bootstrap en el proyecto
Debes incluir los archivos CSS y JS de Bootstrap en tu HTML:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
2️⃣ Agregar el botón para abrir el modal
Este botón permite abrir el modal cuando se hace clic:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#miModal">
Abrir Modal
</button>
3️⃣ Crear la estructura del modal
Bootstrap maneja los modales con una estructura específica:
<div class="modal fade" id="miModal" tabindex="-1" aria-labelledby="miModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
</div>
<div class="modal-body">
(Aquí va el contenido del formulario)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
4️⃣ Agregar la imagen de usuario
Usamos un div redondo (`rounded-circle`) y centramos la imagen dentro:
<div class="d-flex justify-content-center align-items-center rounded-circle border p-4"
style="width: 250px; height: 250px;">
<img src="URL_DE_LA_IMAGEN" class="rounded-circle img-fluid" style="width: 100%; height: 100%;">
</div>
5️⃣ Crear el formulario
Incluye campos de usuario y contraseña dentro del modal:
<form>
<div class="mb-3">
<label class="form-label">Username</label>
<input type="text" class="form-control" placeholder="Enter Username" required>
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control" placeholder="Enter Password" required>
</div>
<button type="submit" class="btn btn-primary w-100">Login</button>
</form>
✅ ¡Listo! Ya tienes tu modal funcionando
Con estos pasos, has construido un modal con Bootstrap que incluye una imagen de usuario y un formulario de inicio de sesión.
📌 Código completo
Aquí tienes el código completo del formulario de inicio de sesión en un modal de Bootstrap. Solo copia y pega en tu proyecto:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modal con Bootstrap</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Botón para abrir el modal -->
<div class="text-center mt-5">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#miModal">
Abrir Modal
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="miModal" tabindex="-1" aria-labelledby="miModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
</div>
<div class="modal-body">
<form action="action_page.php" method="post">
<div class="mb-4 d-flex justify-content-center">
<div class="d-flex justify-content-center align-items-center rounded-circle border border-1 p-4"
style="width: 250px; height: 250px;">
<img src="https://static.vecteezy.com/system/resources/previews/000/439/863/non_2x/vector-users-icon.jpg"
alt="Avatar" class="rounded-circle img-fluid"
style="width: 100%; height: 100%;">
</div>
</div>
<div class="mb-3">
<label for="uname" class="form-label"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" class="form-control" required>
</div>
<div class="mb-3">
<label for="psw" class="form-label"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" class="form-control" required>
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="rememberMe" name="remember">
<label class="form-check-label" for="rememberMe">Remember me</label>
</div>
<button type="submit" class="btn btn-primary w-100">Login</button>
</form>
</div>
<div class="modal-footer d-flex justify-content-between">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<a href="#" class="text-decoration-none">Forgot password?</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias