Responsive Login Form with BOOTSTRAP 5 | Transparent Login form with Glass Effect

Learn how to create a responsive login form using Bootstrap 5, HTML, and CSS.

Responsive Login Form with BOOTSTRAP 5 | Transparent Login form with Glass & hover Effect

Responsive Login Form with Bootstrap 5, HTML & CSS

This responsive login form is built using HTML, CSS, and Bootstrap 5. It demonstrates how to create a modern and mobile-friendly authentication interface with clean design and proper form structure. The layout automatically adapts to different screen sizes, making it suitable for desktops, tablets, and smartphones.

The project utilizes Bootstrap 5 components such as form controls, buttons, spacing utilities, and responsive containers to simplify development while maintaining a professional appearance. Custom CSS is used to enhance the visual design, improve user experience, and create a polished login page suitable for real-world web applications.

This code snippet is ideal for beginners learning Bootstrap 5 and developers looking for a ready-to-use responsive login form template that can be integrated into personal, business, or client projects.

Steps to Create a Responsive Login Form Using Bootstrap 5, HTML & CSS

Follow these simple steps to build a responsive login page:

Create a project folder, for example, bootstrap-login-form.
Inside the folder, create an index.html file.
Add the Bootstrap 5 CDN link inside the <head> section of the HTML document.

This project is a great starting point for learning Bootstrap forms, responsive layouts, and modern UI design techniques used in professional web development.

                            
                                <!DOCTYPE html>
<!-- TheProviders ----------------- youtube.com/@TheProvidersOfficial -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Transparent Login Form using Bootstrap 5</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">


</head>

<body>

    <div class="container text-dark vh-100">
        <div class="row h-100 justify-content-center align-items-center ">
            <div class="col-lg-5 col-md-8">

                <div class="login-card p-5 rounded-4">
                    <h3 class="mb-4 text-dark text-center">Login Form</h3>
                    <form>
                        <div class="mb-4">
                            <input type="email" class="form-control border-0 " placeholder="Email address">
                        </div>
                        <div class="mb-4">
                            <input type="password" class="form-control border-0" placeholder="Password">
                        </div>

                        <div class="mb-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="checkDefault">
                                <label class="form-check-label" for="checkDefault">
                                    Remember Me
                                </label>
                            </div>
                        </div>

                        <div class="d-grid mb-2">
                            <button type="submit" class="btn btn-primary btn-login rounded-3 fw-semibold">Login</button>
                        </div>
                        <p class="mb-0">Don't have an account? <a href="#" class="text-dark fw-bold">Sign up</a></p>
                    </form>
                </div>

            </div>
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Apply external CSS styling to improve the appearance of the form. Save the file and open it in a browser to view the responsive login page.

                            
                                <style>
        body {
            background: url("bg-image.jpeg") no-repeat center center fixed;
            background-size: cover;
        }

        .login-card {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(30px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
        }

        .form-control {
            background: rgba(255, 255, 255, 0.2);
            height: 40px;
        }

        .form-control:focus {
            background: rgba(255, 255, 255, 0.3);
        }

        .btn-login {
            transition: 0.3s;
        }

        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
        }
    </style>

Download Code Files