content logo

Bootstrap Forms:

Pure CSS Login Form with Bootstrap

Forms can be used for various tasks on websites. One of these applications is the use of forms to log in users to their account. In this form, the same thing is done and it has two fields, one for entering the username and the second field for entering the password. Both of these fields have an icon. The background of the whole form is also two colors. Both of these colors are light and pale.

#Bootstrap Login Form #Free Bootstrap Form #HTML Login Form #Pure CSS Form 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">
                <div class="form-container">
                    <form class="form-horizontal">
                        <h3 class="title">Log in</h3>
                        <div class="form-group">
                            <span class="input-icon"><i class="fa fa-user-circle"></i></span>
                            <input class="form-control" type="email" placeholder="@Username" />
                        </div>
                        <div class="form-group">
                            <span class="input-icon"><i class="fa fa-key"></i></span>
                            <input class="form-control" type="password" placeholder="Password" />
                        </div>
                        <button class="btn signin">Log in</button>
                        <span class="forgot-pass"><a href="#">Forgot Password?</a></span>
                        <a class="user-signup" href="#">Signup <i class="fa fa-user-plus"></i></a>
                    </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: #FDD6E3;
    margin: 20px;
}
.form-container {
    font-family: "Roboto Condensed", sans-serif;
}
.form-container .form-horizontal {
    background: linear-gradient(-45deg, #fde7f9 50%, #e5fbf5 50%);
    padding: 30px 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}
.form-container .title {
    color: #333;
    font-family: "Sumana", serif;
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    margin: 0 0 40px;
}
.form-horizontal .form-group {
    background-color: #fff;
    margin: 0 0 5px;
    border-radius: 3px;
}
.form-horizontal .form-group:nth-child(3) {
    margin-bottom: 40px;
}
.form-horizontal .input-icon {
    color: #555;
    font-size: 15px;
    text-align: center;
    line-height: 42px;
    height: 40px;
    width: 25px;
    margin: 0 0 0 4px;
    vertical-align: top;
    display: inline-block;
}
.form-horizontal .form-control {
    color: #222;
    background-color: transparent;
    font-size: 15px;
    letter-spacing: 1px;
    width: calc(100% - 33px);
    height: 40px;
    padding: 0 5px;
    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: #b5b5b5;
    font-size: 15px;
    font-weight: 400;
    text-transform: capitalize;
}
.form-horizontal .btn {
    color: #555;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 1px;
    width: 100%;
    padding: 10px 15px 8px;
    margin: 0 0 30px;
    border: none;
    border-radius: 3px;
    transition: all 0.3s ease;
}
.form-horizontal .btn:hover,
.form-horizontal .btn:focus {
    color: #555;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1) inset;
    outline: none;
}
.form-horizontal .forgot-pass {
    font-size: 14px;
    font-weight: 500;
    width: calc(100% - 105px);
    margin: 0 0 20px 0;
    display: inline-block;
}
.form-horizontal .forgot-pass a {
    color: #333;
    transition: all 0.3s ease 0s;
}
.form-horizontal .forgot-pass a:hover {
    color: #000;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
.form-horizontal .user-signup {
    color: #333;
    background: #b9f2e7;
    text-align: center;
    width: 100px;
    padding: 10px 15px 8px;
    border-radius: 3px;
    display: inline-block;
    transition: all 0.3s ease 0s;
}
.form-horizontal .user-signup:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) inset;
}
<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: #FDD6E3;
    margin: 20px;
}
.form-container {
    font-family: "Roboto Condensed", sans-serif;
}
.form-container .form-horizontal {
    background: linear-gradient(-45deg, #fde7f9 50%, #e5fbf5 50%);
    padding: 30px 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}
.form-container .title {
    color: #333;
    font-family: "Sumana", serif;
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    margin: 0 0 40px;
}
.form-horizontal .form-group {
    background-color: #fff;
    margin: 0 0 5px;
    border-radius: 3px;
}
.form-horizontal .form-group:nth-child(3) {
    margin-bottom: 40px;
}
.form-horizontal .input-icon {
    color: #555;
    font-size: 15px;
    text-align: center;
    line-height: 42px;
    height: 40px;
    width: 25px;
    margin: 0 0 0 4px;
    vertical-align: top;
    display: inline-block;
}
.form-horizontal .form-control {
    color: #222;
    background-color: transparent;
    font-size: 15px;
    letter-spacing: 1px;
    width: calc(100% - 33px);
    height: 40px;
    padding: 0 5px;
    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: #b5b5b5;
    font-size: 15px;
    font-weight: 400;
    text-transform: capitalize;
}
.form-horizontal .btn {
    color: #555;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 1px;
    width: 100%;
    padding: 10px 15px 8px;
    margin: 0 0 30px;
    border: none;
    border-radius: 3px;
    transition: all 0.3s ease;
}
.form-horizontal .btn:hover,
.form-horizontal .btn:focus {
    color: #555;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1) inset;
    outline: none;
}
.form-horizontal .forgot-pass {
    font-size: 14px;
    font-weight: 500;
    width: calc(100% - 105px);
    margin: 0 0 20px 0;
    display: inline-block;
}
.form-horizontal .forgot-pass a {
    color: #333;
    transition: all 0.3s ease 0s;
}
.form-horizontal .forgot-pass a:hover {
    color: #000;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
.form-horizontal .user-signup {
    color: #333;
    background: #b9f2e7;
    text-align: center;
    width: 100px;
    padding: 10px 15px 8px;
    border-radius: 3px;
    display: inline-block;
    transition: all 0.3s ease 0s;
}
.form-horizontal .user-signup:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) inset;
}
</style>

</head>
<body>
<div class="form-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-4 col-md-4">
                <div class="form-container">
                    <form class="form-horizontal">
                        <h3 class="title">Log in</h3>
                        <div class="form-group">
                            <span class="input-icon"><i class="fa fa-user-circle"></i></span>
                            <input class="form-control" type="email" placeholder="@Username" />
                        </div>
                        <div class="form-group">
                            <span class="input-icon"><i class="fa fa-key"></i></span>
                            <input class="form-control" type="password" placeholder="Password" />
                        </div>
                        <button class="btn signin">Log in</button>
                        <span class="forgot-pass"><a href="#">Forgot Password?</a></span>
                        <a class="user-signup" href="#">Signup <i class="fa fa-user-plus"></i></a>
                    </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