content logo

Bootstrap Forms:

Bootstrap Purple Login Form

The login form is one of the essential parts of any website and can attract new visitors. If you own a website and want to use an attractive login form, look at this post carefully. This code contains the Bootstrap Purple Login Form with a beautiful design and theme. The following Light Purple Login Form allows users to enter their accounts easily. If you want to attract more people with this feature, it is better to use a beautiful bootstrap. By looking at this post, you understand that the Bootstrap Login Code has a fantastic design, and it looks so eye-catching.

The background of this Free Form Code is dirty purple and looks so beautiful and unique. The internal page of this form has a white background. You can see a person icon at the top of the page in white color, and the inner page is like a quote related to that person. This form has two sections for username and password alongside icons. The login button is yellow with a white border. When you select that, the color changes to white, and the border turns yellow. This Login Form with HTML has options to reset the forgotten password. You can also choose the option to remember the password.

#

Light Purple Login Form

#

Login Form with HTML

#

Free Form Code

#

Bootstrap Login Code

<!-- This script got from frontendfreecode.com -->
<div class="form-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6">
                <div class="form-container">
                    <div class="form-icon">
                        <i class="fa fa-user-circle"></i>
                    </div>
                    <form class="form-horizontal">
                        <div class="form-group">
                            <span class="input-icon"><i class="fa fa-user"></i></span>
                            <input class="form-control" type="email" placeholder="Username" />
                        </div>
                        <div class="form-group">
                            <span class="input-icon"><i class="fa fa-lock"></i></span>
                            <input class="form-control" type="password" placeholder="Password" />
                        </div>
                        <button class="btn signin">Login</button>
                        <div class="remember-me">
                            <input type="checkbox" />
                            <label>Remember Me</label>
                        </div>
                        <span class="forgot-pass">Forgot Password? <a href="#">Click Here</a></span>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body {
    background-color: #835b5b;
    margin: 20px;
}
.form-container {
    font-family: "Mukta", sans-serif;
}
.form-container .form-icon {
    color: #fff;
    font-size: 88px;
    text-align: center;
    line-height: 107px;
    width: 100px;
    height: 100px;
    padding: 0 0 0 0.5px;
    margin: 0 auto 35px;
    border: 4px solid #fff;
    border-radius: 50%;
}
.form-container .form-horizontal {
    background: #fff;
    padding: 35px 20px 5px;
    position: relative;
}
.form-container .form-horizontal:before {
    content: "";
    background: linear-gradient(-45deg, transparent 49%, #fff 50%);
    height: 30px;
    width: 30px;
    transform: translateX(-50%) rotate(45deg);
    position: absolute;
    left: 50%;
    top: -15px;
}
.form-horizontal .form-group {
    background-color: #ebebeb;
    margin: 0 0 15px;
    border-radius: 10px;
    overflow: hidden;
}
.form-horizontal .form-group:nth-child(3) {
    margin-bottom: 40px;
}
.form-horizontal .input-icon {
    color: #fff;
    background-color: #d7d7d7;
    font-size: 25px;
    text-align: center;
    line-height: 51px;
    height: 50px;
    width: 55px;
    vertical-align: top;
    display: inline-block;
}
.form-horizontal .form-control {
    color: #555;
    background-color: transparent;
    font-size: 18px;
    letter-spacing: 1px;
    width: calc(100% - 60px);
    height: 50px;
    padding: 10px;
    box-shadow: none;
    border: none;
    border-radius: 0;
    display: inline-block;
    transition: all 0.3s;
}
.form-horizontal .form-control:focus {
    box-shadow: none;
    border: none;
}
.form-horizontal .form-control::placeholder {
    color: #777;
    font-size: 18px;
    text-transform: capitalize;
}
.form-horizontal .btn {
    color: #000;
    background-color: #fedd02;
    font-size: 22px;
    text-transform: uppercase;
    width: 190px;
    padding: 7px 10px 6px;
    margin: 0 auto 8px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 0 2px #fff inset;
    border: 5px solid #fedd02;
    display: block;
    position: relative;
    transition: all 0.5s ease 0s;
}
.form-horizontal .btn:hover,
.form-horizontal .btn:focus {
    color: #000;
    background-color: #ebebeb;
    box-shadow: 0 0 0 2px #fff inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 0 10px rgba(0, 0, 0, 0.15);
    outline: none;
}
.form-horizontal .remember-me {
    color: #999;
    text-align: center;
    margin: 0 0 10px;
}
.form-horizontal .remember-me label {
    font-weight: 500;
    margin: 0 0 0 2px;
    vertical-align: text-top;
}
.form-horizontal .forgot-pass {
    color: #888;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    display: block;
}
.form-horizontal .forgot-pass a {
    color: #666;
    transition: all 0.3s ease 0s;
}
.form-horizontal .forgot-pass a:hover {
    text-decoration: underline;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
    background-color: #835b5b;
    margin: 20px;
}
.form-container {
    font-family: "Mukta", sans-serif;
}
.form-container .form-icon {
    color: #fff;
    font-size: 88px;
    text-align: center;
    line-height: 107px;
    width: 100px;
    height: 100px;
    padding: 0 0 0 0.5px;
    margin: 0 auto 35px;
    border: 4px solid #fff;
    border-radius: 50%;
}
.form-container .form-horizontal {
    background: #fff;
    padding: 35px 20px 5px;
    position: relative;
}
.form-container .form-horizontal:before {
    content: "";
    background: linear-gradient(-45deg, transparent 49%, #fff 50%);
    height: 30px;
    width: 30px;
    transform: translateX(-50%) rotate(45deg);
    position: absolute;
    left: 50%;
    top: -15px;
}
.form-horizontal .form-group {
    background-color: #ebebeb;
    margin: 0 0 15px;
    border-radius: 10px;
    overflow: hidden;
}
.form-horizontal .form-group:nth-child(3) {
    margin-bottom: 40px;
}
.form-horizontal .input-icon {
    color: #fff;
    background-color: #d7d7d7;
    font-size: 25px;
    text-align: center;
    line-height: 51px;
    height: 50px;
    width: 55px;
    vertical-align: top;
    display: inline-block;
}
.form-horizontal .form-control {
    color: #555;
    background-color: transparent;
    font-size: 18px;
    letter-spacing: 1px;
    width: calc(100% - 60px);
    height: 50px;
    padding: 10px;
    box-shadow: none;
    border: none;
    border-radius: 0;
    display: inline-block;
    transition: all 0.3s;
}
.form-horizontal .form-control:focus {
    box-shadow: none;
    border: none;
}
.form-horizontal .form-control::placeholder {
    color: #777;
    font-size: 18px;
    text-transform: capitalize;
}
.form-horizontal .btn {
    color: #000;
    background-color: #fedd02;
    font-size: 22px;
    text-transform: uppercase;
    width: 190px;
    padding: 7px 10px 6px;
    margin: 0 auto 8px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 0 2px #fff inset;
    border: 5px solid #fedd02;
    display: block;
    position: relative;
    transition: all 0.5s ease 0s;
}
.form-horizontal .btn:hover,
.form-horizontal .btn:focus {
    color: #000;
    background-color: #ebebeb;
    box-shadow: 0 0 0 2px #fff inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 0 10px rgba(0, 0, 0, 0.15);
    outline: none;
}
.form-horizontal .remember-me {
    color: #999;
    text-align: center;
    margin: 0 0 10px;
}
.form-horizontal .remember-me label {
    font-weight: 500;
    margin: 0 0 0 2px;
    vertical-align: text-top;
}
.form-horizontal .forgot-pass {
    color: #888;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    display: block;
}
.form-horizontal .forgot-pass a {
    color: #666;
    transition: all 0.3s ease 0s;
}
.form-horizontal .forgot-pass a:hover {
    text-decoration: underline;
}
</style>

</head>
<body>
<div class="form-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6">
                <div class="form-container">
                    <div class="form-icon">
                        <i class="fa fa-user-circle"></i>
                    </div>
                    <form class="form-horizontal">
                        <div class="form-group">
                            <span class="input-icon"><i class="fa fa-user"></i></span>
                            <input class="form-control" type="email" placeholder="Username" />
                        </div>
                        <div class="form-group">
                            <span class="input-icon"><i class="fa fa-lock"></i></span>
                            <input class="form-control" type="password" placeholder="Password" />
                        </div>
                        <button class="btn signin">Login</button>
                        <div class="remember-me">
                            <input type="checkbox" />
                            <label>Remember Me</label>
                        </div>
                        <span class="forgot-pass">Forgot Password? <a href="#">Click Here</a></span>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview