Responsive Login and Register Page with Bootstrap Components

Create a stylish and responsive login page and register form using Bootstrap components. This snippet ensures seamless user authentication and modern design.

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
body {
    font-family: "Nunito", sans-serif;      
}
#login_page_3{
    background: #1c1e33;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    min-height: 100vh;
    padding: 50px 0;
}
#login_page_3 p{
    color: #dedede;
}
#login_page_3 a{
    color: #dc3545;
    transition: all .4s;
}
#login_page_3 a:hover{
    color: #fff;
}
#login_page_3 .logo img{
    max-width: 120px;
}
#login_page_3 .login{
    max-width: 500px;
    margin: 20px auto;
    background: #25273e;
    padding: 30px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border-radius: 5px;
}
#login_page_3 .title h2{
    font-size: 24px;
    text-transform: capitalize;
    margin-bottom: 5px;
    color: #fff;
}
#login_page_3 .title p{
    margin-bottom: 40px;
    color: #a8a8a8;
}
#login_page_3 form .email,
#login_page_3 form .pass,
#login_page_3 form .user{
    position: relative;
    margin-bottom: 25px;
}
#login_page_3 form .email i,
#login_page_3 form .pass i,
#login_page_3 form .user i{
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #dedede;
}
#login_page_3 form input.form-control{
    border-radius: 5px;
    padding: 10px 20px 10px 35px;
    border-color: #dc3545;
    background-color: transparent;
    color: #dedede;
}
#login_page_3 form input::placeholder{
    color: #dedede;
}
#login_page_3 form label{
    color: #dedede;
}
#login_page_3 form button{
    border-radius: 5px;
    padding: 10px 20px;
    width: 100%;
    text-transform: capitalize;
    margin-bottom: 10px;
}
#login_page_3 .reset p{
    color: #a8a8a8;
    font-size: 14px;
    margin: 0;
}
#login_page_3 .sign_up_btn a,
#login_page_3 .sign_in_btn a{
    text-decoration: none;
    margin-top: 10px;
    display: inline-block;
}
#login_page_3 .reset p a{
    text-transform: capitalize;
    text-decoration: none;
    color: #dc3545;
    transition: all .4s;
}
#login_page_3 .reset p a:hover{
    color: #fff;
}
#login_page_3 a{
    text-decoration: none;
}
.form-control:focus{
    box-shadow: 0 0 0 .25rem rgba(220, 53, 69,.25);
}
.form-check-input:checked{
    background-color: #dc3545;
    border-color: #dc3545;
}
.form-check-input:focus{
    box-shadow: 0 0 0 .25rem rgba(220, 53, 69,.25);
}

JS

Width:

Height:

Create a Responsive Login and Register Page with Bootstrap Components

It has been shown that Bootstrap is one of the ace frameworks for developing responsive web designs. This particular Bootstrap snippet demonstrates the login page and other aspects of a very cool register form, all made using Bootstrap components. The designs are made clean and user-friendly, adapted to any device; hence it is excellent for modern web applications.

The login page has leveraged the uses of Bootstrap component forms, buttons, and icons for its simplicity and functionality. The form is designed with a very straight-forward design for the user to fill in the email and password. There is a check box titled "Remember Me," as well as a link that says "Reset Password" for the user's convenience. This is a simple but stylish log in form offered by a few lines of Bootstrap CSS classes and JavaScript.

The register form included in this snippet makes it easy for new users to sign up. It contains well-defined fields for name, email, password, and password confirmation. The form-check component makes it easy for users to agree with the privacy policy before proceeding to create an account. The designs ensure the efficacious onboarding experience with a tinge of professionalism in design.

Some interesting features of this snippet are using Bootstrap icons, responsive inputs, and interactive JavaScript to toggle between both login form and register form. The dynamic way of switching between them is implemented in jQuery to further enhance the function of this page without reloading it.

If the project requires user authentication, well through this page, the project can see the light of day. It is very simple to have such a snippet just using Bootstrap components because it leaves behind all the work on the back end and functionality, yet not compromising on design. Thus, it is an ideal snippet for building any modern yet professional-looking login form or register form.