Formulario Inicio de session (como hacerlo)

Username

Password

Remember me

Forgot password?

📌 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.