content logo

Bootstrap Forms:

Bootstrap Purple Login Form

To make your website more beautiful, you can use bootstrap codes and make simple forms of your website more beautiful. One of these forms is in this code. The form we have in this code has a white theme but the external background of the form is dirty purple. The login button in this form is yellow. An icon corresponding to the content of that field is placed next to the username and password fields.

#Light Purple Login Form #Login Form with HTML #Free Form Code #Bootstrap Login Code

<!-- This script got from www.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://www.frontendfreecode.com">Frontend Free Code</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 www.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">Frontend Free Code</a></div>

</body>
</html>
Preview